Στοιχεία DOM JavaScript

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Αυτή η σελίδα σάς διδάσκει πώς να βρίσκετε και να έχετε πρόσβαση σε στοιχεία HTML μια σελίδα HTML.

Εύρεση στοιχείων HTML

Συχνά, με τη JavaScript, θέλετε να χειριστείτε στοιχεία HTML.

Για να το κάνετε αυτό, πρέπει πρώτα να βρείτε τα στοιχεία. Υπάρχουν διάφοροι τρόποι για να γίνει αυτό:

  • Εύρεση στοιχείων HTML κατά αναγνωριστικό

  • Εύρεση στοιχείων HTML ανά όνομα ετικέτας

  • Εύρεση στοιχείων HTML με βάση το όνομα της τάξης

  • Εύρεση στοιχείων HTML από επιλογείς CSS

  • Εύρεση στοιχείων HTML από συλλογές αντικειμένων HTML

Εύρεση στοιχείου HTML ανά αναγνωριστικό

Ο ευκολότερος τρόπος για να βρείτε ένα στοιχείο HTML στο DOM, είναι χρησιμοποιώντας το αναγνωριστικό στοιχείου.

Αυτό το παράδειγμα βρίσκει το στοιχείο με id="intro":

Παράδειγμα

const element = document.getElementById("intro");

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p id="intro">Finding HTML Elements by Id</p>
<p>This example demonstrates the <b>getElementsById</b> method.</p>

<p id="demo"></p>

<script>
const element = document.getElementById("intro");

document.getElementById("demo").innerHTML = 
"The text from the intro paragraph is: " + element.innerHTML;

</script>

</body>
</html>

Εάν βρεθεί το στοιχείο, η μέθοδος θα επιστρέψει το στοιχείο ως αντικείμενο (σε στοιχείο).

Εάν το στοιχείο δεν βρεθεί, το στοιχείο θα περιέχει null.

Εύρεση στοιχείων HTML ανά όνομα ετικέτας

Αυτό το παράδειγμα βρίσκει όλα τα στοιχεία <p>:

Παράδειγμα

const element = document.getElementsByTagName("p");

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Finding HTML Elements by Tag Name.</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>

<p id="demo"></p>

<script>
const element = document.getElementsByTagName("p");

document.getElementById("demo").innerHTML = 'The text in first paragraph (index 0) is: ' + element[0].innerHTML;

</script>

</body>
</html>

Αυτό το παράδειγμα βρίσκει το στοιχείο με id="main" και, στη συνέχεια, βρίσκει όλα τα στοιχεία <p> μέσα στο "main":

Παράδειγμα

const x = document.getElementById("main");
const y = x.getElementsByTagName("p");

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<div id="main">
<p>Finding HTML Elements by Tag Name</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>
</div>

<p id="demo"></p>

<script>
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");

document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) inside "main" is: ' + y[0].innerHTML;

</script>

</body>
</html>

Εύρεση στοιχείων HTML ανά όνομα κλάσης

Εάν θέλετε να βρείτε όλα τα στοιχεία HTML με το ίδιο όνομα κλάσης, χρησιμοποιήστε getElementsByClassName().

Αυτό το παράδειγμα επιστρέφει μια λίστα με όλα τα στοιχεία με class="intro".

Παράδειγμα

const x = document.getElementsByClassName("intro");

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Finding HTML Elements by Class Name.</p>
<p class="intro">Hello World!</p>
<p class="intro">This example demonstrates the <b>getElementsByClassName</b> method.</p>

<p id="demo"></p>

<script>
const x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) with class="intro" is: ' + x[0].innerHTML;
</script>

</body>
</html>

Εύρεση στοιχείων HTML από επιλογείς CSS

Εάν θέλετε να βρείτε όλα τα στοιχεία HTML που ταιριάζουν με έναν καθορισμένο επιλογέα CSS (αναγνωριστικό, ονόματα κλάσεων, τύποι, χαρακτηριστικά, τιμές χαρακτηριστικών, κ.λπ.), χρησιμοποιήστε τη μέθοδο querySelectorAll().

Αυτό το παράδειγμα επιστρέφει μια λίστα με όλα τα στοιχεία <p> με class="intro".

Παράδειγμα

const x = document.querySelectorAll("p.intro");

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Finding HTML Elements by Query Selector</p>
<p class="intro">Hello World!.</p>
<p class="intro">This example demonstrates the <b>querySelectorAll</b> method.</p>

<p id="demo"></p>

<script>
const x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) with class="intro" is: ' + x[0].innerHTML;
</script>

</body>
</html>

Εύρεση στοιχείων HTML από συλλογές αντικειμένων HTML

Αυτό το παράδειγμα βρίσκει το στοιχείο φόρμας με id="frm1", στις φόρμες συλλογή και εμφανίζει όλο το στοιχείο αξίες:

Παράδειγμα

const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length; i++) {
  text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Finding HTML Elements Using <b>document.forms</b>.</p>

<form id="frm1" action="/action_page.php">
  First name: <input type="text" name="fname" value="Donald"><br>
  Last name: <input type="text" name="lname" value="Duck"><br><br>
  <input type="submit" value="Submit">
</form> 

<p>These are the values of each element in the form:</p>

<p id="demo"></p>

<script>
const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length ;i++) {
  text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Τα ακόλουθα αντικείμενα HTML (και συλλογές αντικειμένων) είναι επίσης προσβάσιμα:

    έγγραφο.αγκυρώσεις

    <!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements Using document.anchors</h2>

<a name="html">HTML Tutorial</a><br>
<a name="css">CSS Tutorial</a><br>
<a name="xml">XML Tutorial</a><br>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Number of anchors are: " + document.anchors.length;
</script>


</body>
</html>

    έγγραφο.σώμα

    <!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = document.body.innerHTML;
</script>

</body>
</html>

    έγγραφο.documentΣτοιχείο

    <!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = document.documentElement.innerHTML;
</script>

</body>
</html>

    έγγραφο.ενσωματώνει

    <!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Number of embeds: " + document.embeds.length;
</script>

</body>
</html>

    έγγραφο.έντυπα

    <!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements Using document.forms</h2>

<form action="">
First name: <input type="text" name="fname" value="Donald">
<input type="submit" value="Submit">
</form> 

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Number of forms: " + document.forms.length;
</script>

</body>
</html>

    έγγραφο.κεφαλή

    <!DOCTYPE html>
<html>

<head>
<title>W3Schools Demo</title>
</head>

<body>

<h2>JavaScript HTMLDOM</h2>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
document.head;
</script>

</body>
</html>

    έγγραφο.εικόνες

    <!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements Using document.images</h2>

<img src="pic_htmltree.gif" width="486" height="266">
<img src="pic_navigate.gif" width="362" height="255">

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Number of images: " + document.images.length;
</script>

</body>
</html>

    έγγραφο.σύνδεσμοι

    <!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements Using document.links</h2>

<p>
<a href="/html/default.asp">HTML</a>
<br>
<a href="/css/default.asp">CSS</a>
</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Number of links: " + document.links.length;
</script>

</body>
</html>

    έγγραφο.σενάρια

    <!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements Using document.scripts</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Number of scripts: " + document.scripts.length;
</script>

</body>
</html>

    τίτλος εγγράφου

    <!DOCTYPE html>
<html>
  <head>
  <title>W3Schools Demo</title>
  </head>
<body>

<h2>Finding HTML Elements Using document.title</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"The title of this document is: " + document.title;
</script>

</body>
</html>