Εγχειρίδιο HTML DOM NodeList

NodeList

Η NodeList είναι μια συλλογή αντικειμένων κόμβων που μοιάζει με λίστα (κατάλογος).

Οι κόμβοι στη NodeList μπορούν να προσέγγιστούν μέσω του αριθμητικού τους αριθμού (από 0).

Προσδιορισμός μήκουςΕπιστροφή του αριθμού των κόμβων στη NodeList.

NodeList vs. HTMLCollection

NodeList με HTMLCollection Παρόμοια.

Δείτε τις οδηγίες παρακάτω στην σελίδα.

Ποιος επιστρέφει NodeList?

Ιδιότητα childNodes

Μέθοδος querySelectorAll()

Μέθοδος getElementsByName()

Ιδιότητες και μεθόδοι

Μπορείτε να χρησιμοποιήσετε τις παρακάτω ιδιότητες και μεθόδους στη NodeList:

Όνομα Περιγραφή
entries() Επιστροφή του αναγνώστη με ζευγάρια κλειδιών/τιμών από τη λίστα.
forEach() Εκτέλεση συνάρτησης ανατροφοδότησης για κάθε κόμβο στη λίστα.
item() Επιστροφή του κόμβου στην καθορισμένη索引.
keys() Χρήση των κλειδιών της λίστας για να επιστρέψετε τον αναγνώστη.
length Επιστροφή του αριθμού των κόμβων στη NodeList.
values() Επιστροφή του αναγνώστη χρησιμοποιώντας τις τιμές της λίστας.

παραδείγματα

Επιλογή όλων των <p> Κόμβος:

const myNodeList = document.querySelectorAll("p");

Τα στοιχεία της NodeList μπορούν να προσέγγιστούν μέσω του αριθμητικού τους αριθμού.

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

myNodeList[1]

Προσπαθήστε το προσωπικά

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

Μέγεθος Λίστας Κόμβων HTML DOM

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

Παράδειγμα 1

myNodelist.length

Προσπαθήστε το προσωπικά

Όταν θέλετε να διανύσετε τους κόμβους της λίστας κόμβων:length Χρήσιμες ιδιότητες:

Παράδειγμα 2

Αλλαγή χρώματος όλων των στοιχείων <p> της λίστας κόμβων:

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

Προσπαθήστε το προσωπικά

Δεν είναι σειρά

Το NodeList δεν είναι σειρά!

Το NodeList φαίνεται σαν μια σειρά, αλλά αυτό δεν είναι έτσι.

Μπορείτε να περιηγηθείτε στο NodeList και να χρησιμοποιήσετε τις αναφορές του κωδικού.

Αλλά δεν μπορείτε να χρησιμοποιήσετε μεθόδους της σειράς στο NodeList, όπως push(), pop() ή join().

Η διαφορά μεταξύ HTMLCollection και NodeList

NodeList με HTMLcollection πολύ παρόμοια.

Και τα δύο είναι συλλογές κόμβων (στοιχείων) που εξάγονται από το έγγραφο, παρόμοιες με τις λίστες (μαζί με την πρόσβαση μέσω του αριθμητικού κωδικού). Ο αριθμός ξεκινά από το 0.

Και τα δύο έχουν Προσδιορισμός μήκουςτο οποίο επιστρέφει τον αριθμό των στοιχείων της λίστας (συλλογής).

Το HTMLCollection είναιΕγγραφική στοιχείασυλλογή.

Το NodeList είναι μιαΚόμβος εγγράφουσυλλογή (εレμαινόμενοι κόμβοι, ιδιότητες και κείμενα).

Οι αντικείμενοι του HTMLCollection μπορούν να προσέγγιστούν μέσω του ονόματος, του id ή του αριθμητικού κωδικού τους.

Το κάθε στοιχείο του NodeList μπορεί να προσέγγιστεί μόνο μέσω του αριθμητικού του κωδικού.

Το HTMLCollection είναι πάντα μιαΖωντανόΣυλλογή. Για παράδειγμα: Αν προσθέσετε ένα στοιχείο <li> στη λίστα του DOM, η λίστα στο HTMLCollection θα αλλάξει.

Το NodeList είναι συνήθως μιαΣτατικόΣυλλογή. Για παράδειγμα: Αν προσθέσετε ένα στοιχείο <li> στη λίστα του DOM, η λίστα στο NodeList δεν θα αλλάξει.

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

querySelectorAll() Η μέθοδος επιστρέφει ένα στατικό NodeList.

childNodes Η ιδιότητα επιστρέφει ένα ζωντανό NodeList.

ζωντανή λίστα κόμβων

Σε ορισμένες περιπτώσεις, το NodeList είναιΖωντανό：Οι αλλαγές στο DOM ενημερώνουν το NodeList.

childNodes Η μέθοδος επιστρέφει ένα ζωντανό NodeList.