12. Συλλογές JavaScript HTML DOM

DOM Collections


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

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

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

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

Παράδειγμα

var x = document.getElementsByTagName("p");

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

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

y = x[1];

Δοκιμάστε το »

Σημείωση: Ο δείκτης ξεκινά από το 0.


Μήκος HTMLCollection HTML

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

Παράδειγμα

var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection.length;

Δοκιμάστε το »

Παράδειγμα που εξηγείται:

  1. Δημιουργήστε μια συλλογή από όλα τα <p>στοιχεία
  2. Εμφανίστε το μήκος της συλλογής

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

Παράδειγμα

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

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

Δοκιμάστε το »

Η HTMLCollection δεν είναι ένας πίνακας!

Μια επιλογή HTMLCollection μπορεί να μοιάζει με πίνακα, αλλά δεν είναι.

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

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

Days
Hours
Minutes

12. Συλλογές JavaScript HTML DOM

Κοινοποίηση

Share on facebook
Share on twitter

Ακολουθήστε μας

Αρέσει σε %d bloggers: