Συλλογές JavaScript DOM

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

Το αντικείμενο HTMLCollection

Η μέθοδος getElementsByTagName() επιστρέφει ένα αντικείμενο HTMLCollection.

Ένα αντικείμενο HTMLCollection είναι μια λίστα (συλλογή) που μοιάζει με πίνακα από στοιχεία HTML.

Ο παρακάτω κώδικας επιλέγει όλα τα στοιχεία <p> σε ένα έγγραφο:

Παράδειγμα

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

Τα στοιχεία της συλλογής είναι προσβάσιμα από έναν αριθμό ευρετηρίου.

Για πρόσβαση στο δεύτερο στοιχείο <p> που μπορείτε να γράψετε:

myCollection[1]

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Norway!</p>

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

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

document.getElementById("demo").innerHTML = "The innerHTML of the second paragraph is: " + myCollection[1].innerHTML;

</script>

</body>
</html>

Σημείωση: Το ευρετήριο ξεκινά από 0.

Μήκος συλλογής HTML HTML

Η ιδιότητα length καθορίζει τον αριθμό των στοιχείων σε μια HTMLCollection:

Παράδειγμα

myCollection.length

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Norway!</p>

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

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

document.getElementById("demo").innerHTML = "This document contains " + myCollection.length + " paragraphs.";

</script>

</body>
</html>

Η ιδιότητα length είναι χρήσιμη όταν θέλετε να πραγματοποιήσετε αναζήτηση στα στοιχεία ενός συλλογή:

Παράδειγμα

Αλλάξτε το χρώμα κειμένου όλων των στοιχείων <p>:

const myCollection = document.getElementsByTagName("p");
for (let i = 0; i < myCollection.length; i++) {
  myCollection[i].style.color = "red";
}

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Norway!</p>

<p>Click the button to change the color of all p elements.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  const myCollection = document.getElementsByTagName("p");
  for (let i = 0; i < myCollection.length; i++) {
    myCollection[i].style.color = "red";
  }
}
</script>

</body>
</html>

Μια HTMLCollection ΔΕΝ είναι πίνακας!

Μια HTMLCollection μπορεί να φαίνεται σαν πίνακας, αλλά δεν είναι.

Μπορείτε να περιηγηθείτε στη λίστα και να ανατρέξετε σε τα στοιχεία με αριθμό (όπως ακριβώς ένας πίνακας).

Ωστόσο, δεν μπορείτε να χρησιμοποιήσετε μεθόδους πίνακα όπως valueOf(), pop(), push(), ή join() σε μια HTMLCollection.