JavaScript HTML DOM Λίστα Κόμβων

Αντικείμενο NodeList DOM HTML

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

οι αντικείμενοι NodeList και HTMLCollection είναι σχεδόν ίδιοι.

Αν χρησιμοποιήσετε getElementsByClassName() η μεθόδος, σε ορισμένους (παλαιούς) περιηγητές επιστρέφει αντικείμενο NodeList αντί για HTMLCollection.

Όλοι οι περιηγητές επιστρέφουν childNodes ιδιότητα επιστρέφει αντικείμενο NodeList.

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

Τα παρακάτω κώδικες επιλέγουν όλους τους κόμβους <p> του εγγράφου:

Παράδειγμα

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

}

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

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

y = myNodeList[1];

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

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

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

Παράδειγμα

var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = myNodelist.length;

}

Παράδειγμα ερμηνείας:

  • Δημιουργία λίστας όλων των στοιχείων <p>
  • Εμφάνιση της μήκους της λίστας

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

Παράδειγμα

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

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

}

Προσπαθήστε να το δοκιμάσετε

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

Η HTMLCollection (στο προηγούμενο κεφάλαιο) είναι συλλογή HTML στοιχείων.

Η NodeList είναι συλλογή κόμβων του εγγράφου.

Τα αντικείμενα HTMLCollection και NodeList είναι αντικείμενα ολίσθησης (κολλέκτημα) ορισμένων πινάκων (κολλέκτημα).

Έχουν οριστεί τα στοιχεία της λίστας (κολλέκτημα). length Ιδιότητες.

Και τα δύο μπορούν να αναφέρονται σε κάθε στοιχείο μέσω του索引 (0, 1, 2, 3, 4, ...) όπως έναν πίνακα.

Τηρήση των στοιχείων HTMLCollection, μέσω των ονομάτων, του id ή των αριθμητικών τους ορισμάτων.

Τηρήση των στοιχείων NodeList, μόνο μέσω των αριθμητικών τους ορισμάτων.

Μόνο τα αντικείμενα NodeList μπορούν να περιέχουν κόμβους ιδιοτήτων και κόμβους κειμένου.

Η λίστα κόμβων δεν είναι πίνακας!

Η λίστα κόμβων φαίνεται σαν πίνακας, αλλά δεν είναι.

Μπορείτε να περιηγηθείτε στη λίστα κόμβων και να αναφέρετε τα κόμβατά της όπως έναν πίνακα.

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