JavaScript DOM Nodelist

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

Το αντικείμενο HTML DOM NodeList

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

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

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

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

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

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

Παράδειγμα

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

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

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

myNodeList[1]

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

Μήκος λίστας κόμβων HTML DOM

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

Παράδειγμα

myNodelist.length

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

Παράδειγμα

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

const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
  myNodelist[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 myNodelist = document.querySelectorAll("p");
  for (let i = 0; i < myNodelist.length; i++) {
    myNodelist[i].style.color = "red";
  }
}
</script>

</body>
</html>

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

Μια NodeList και μια HTMLcollection είναι σχεδόν το ίδιο πράγμα.

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

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

Μια HTMLCollection είναι μια συλλογή από στοιχεία εγγράφου.

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

Τα στοιχεία HTMLCollection είναι προσβάσιμα με το όνομά τους, το αναγνωριστικό ή τον αριθμό ευρετηρίου τους.

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

Μια HTMLCollection είναι πάντα μια ζωντανή συλλογή. Παράδειγμα: Εάν προσθέσετε ένα στοιχείο

σε μια λίστα στο DOM, η λίστα στη Συλλογή HTML θα αλλάξει επίσης.

Μια NodeList είναι συνήθως μια στατική συλλογή. Παράδειγμα: Εάν προσθέσετε ένα στοιχείο

σε μια λίστα στο DOM, η λίστα στο NodeList δεν θα αλλάξει.

Τα getElementsByClassName() και getElementsByTagName() οι μέθοδοι επιστρέφουν μια ζωντανή HTMLCollection.

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

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

Όχι πίνακας!

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

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

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