Ο μέθοδος querySelectorAll() του αντικειμένου Document του HTML DOM

  • Προηγούμενη Σελίδα
  • Επόμενη Σελίδα
  • Επιστροφή στο Προηγούμενο επίπεδο Τα Documents του HTML DOM

Ορισμός και χρήση

querySelectorAll() Η μέθοδος επιστρέφει όλα τα στοιχεία που ταιριάζουν στον επιλογέα CSS.

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

Αν ο επιλογέας είναι μη έγκυρος, τότε querySelectorAll() Η μέθοδος θα προκαλέσει SYNTAX_ERR Εξαίρεση.

Παράδειγμα

Παράδειγμα 1

Επιλέγει όλα τα στοιχεία με class="example":

document.querySelectorAll(".example");

δοκιμάστε το προσωπικά

Παράδειγμα 2

Προσθέτει το χρώμα φόντου στο πρώτο στοιχείο <p>:

const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";

δοκιμάστε το προσωπικά

Παράδειγμα 3

Προσθέτει το χρώμα φόντου στο πρώτο στοιχείο <p> με class="example":

const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";

δοκιμάστε το προσωπικά

Παράδειγμα 4

Ο αριθμός των στοιχείων με class="example":

let numb = document.querySelectorAll(".example").length;

δοκιμάστε το προσωπικά

Παράδειγμα 5

Ρροπίζει το χρώμα φόντου όλων των στοιχείων με class="example":

const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

δοκιμάστε το προσωπικά

παράδειγμα 6

Ρυθμίστε τη χρώση του παρασκηνίου για όλα τα στοιχεία <p>.

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

δοκιμάστε το προσωπικά

παράδειγμα 7

Ρυθμίστε τα σύνορα για όλα τα στοιχεία <a> που χρησιμοποιούν την ιδιότητα "target".

const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.border = "10px solid red";
}

δοκιμάστε το προσωπικά

παράδειγμα 8

Ρυθμίστε τη χρώση του παρασκηνίου για κάθε στοιχείο <p> που είναι παιδί του στοιχείου <div>.

const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

δοκιμάστε το προσωπικά

παράδειγμα 9

Ρυθμίστε τη χρώση του παρασκηνίου για όλα τα στοιχεία <h3>, <div> και <span>.

const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

δοκιμάστε το προσωπικά

σύνταξη

document.querySelectorAll(CSSselectors)

παράμετροι

παράμετροι περιγραφή
CSSselectors

απαιτείται. Ένας ή περισσότεροι CSS επιλογείς.

CSS επιλογείς επιλέγουν HTML στοιχεία με βάση το id, την κλάση, τον τύπο, τις ιδιότητες, τις τιμές των ιδιοτήτων κ.λπ.

Για πλήρη λίστα, επισκεφθείτε το Ο οδηγός επιλογής επιλεκτών CSS.

Για πολλαπλούς επιλογείς, χρησιμοποιήστε κόμματα για να διαχωρίσετε κάθε επιλογέα (βλέπε την παραπάνω παράδειγμα).

επιστροφή τιμής

τύπος περιγραφή
οject

Μέσω NodeList αντικειμένων περιέχουν στοιχεία που ταιριάζουν με CSS επιλογείς.

Αν δεν βρεθεί ταιριάζον στοιχείο, επιστρέφεται ένας κενός NodeList αντικείμενο.

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

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

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

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

HTMLCollection είναιΤο στοιχείο ΔокументουΣυλλογή.

Η Λίστα Node είναιΚόμβος ΔокументουΣυλλογή (επιλεγόμενοι κόμβοι, ιδιότητες κόμβων και κόμβοι κειμένου).

Τα στοιχεία της Λίστας HTMLCollection μπορούν να προσέλθουν μέσω του ονόματος, του id ή του αριθμητικού τους αριθμού.

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

Η Λίστα HTMLCollection είναι πάνταΖωντανήΣυλλογή.

Για παράδειγμα: Αν προσθέσετε στο DOM το στοιχείο <li> στη λίστα, η λίστα στη Λίστα HTMLCollection θα αλλάξει.

Η Λίστα Node συνήθως είναιΣτατικήΣυλλογή.

Για παράδειγμα: Αν προσθέσετε στο DOM το στοιχείο <li> στη λίστα, η λίστα στη Λίστα Node δεν αλλάζει.

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

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

childNodes Η ιδιότητα επιστρέφει ζωντανή Λίστα Node.

Υποστήριξη του περιηγητή

document.querySelectorAll() Είναι χαρακτηριστικά DOM Level 3 (2004).

Όλοι οι περιηγητές υποστηρίζουν το:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Υποστήριξη 9-11 Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη

Σχετικές Σελίδες

Εκμάθηση:

Η επιλογή επιλεκτών CSS

Ο οδηγός επιλογής επιλεκτών CSS

Εκμάθηση της Λίστας Node List του JavaScript

Μέθοδος QuerySelector:

Μέθοδος querySelector() του Element

Μέθοδος querySelectorAll() του Element

Μέθοδος querySelector() του Document

Μέθοδος querySelectorAll() του Document

Μέθοδος GetElement:

Μέθοδος getElementById() του Document

Μέθοδος getElementsByTagName() του Document

Μέθοδος getElementsByClassName() του Document

  • Προηγούμενη Σελίδα
  • Επόμενη Σελίδα
  • Επιστροφή στο Προηγούμενο επίπεδο Τα Documents του HTML DOM