HTML DOM Document querySelector() μέθοδος

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

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

Για να επιστρέψετεΌλαταιριάζοντες στοιχεία (μη μόνο το πρώτο ταιριάζον στοιχείο), χρησιμοποιήστε το querySelectorAll().

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

Παράδειγμα

Παράδειγμα 1

Αποκτήστε το πρώτο στοιχείο <p>:

document.querySelector("p");

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

Παράδειγμα 2

Αποκτήστε το πρώτο στοιχείο με κλάση="example":

document.querySelector(".example");

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

Παράδειγμα 3

Αποκτήστε το πρώτο στοιχείο <p> με κλάση="example":

document.querySelector("p.example");

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

Παράδειγμα 4

Αλλάξτε το κείμενο του στοιχείου με id="demo":

document.querySelector("#demo").innerHTML = "Hello World!";

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

Παράδειγμα 5

Επιλέξτε το πρώτο στοιχείο <p> που έχει ως γονικό στοιχείο το <div>:

document.querySelector("div > p");

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

Παράδειγμα 6

Επιλέξτε τον πρώτο στοιχείο <a> που έχει την ιδιότητα "target":

document.querySelector("a[target]");

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

Παράδειγμα 7

Επιλέξτε τον πρώτο <h3> ή τον πρώτο <h4>:

<h3>Ένα στοιχείο h3</h3>
<h4>Ένα στοιχείο h4</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";

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

Παράδειγμα 8

Επιλέξτε τον πρώτο <h3> ή τον πρώτο <h4>:

<h4>Ένα στοιχείο h4</h4>
<h3>Ένα στοιχείο h3</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";

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

Γλώσσα

document.querySelector(cssSelectors)

Παράμετροι

Παράμετροι Περιγραφή
cssSelectors

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

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

Για πλήρη λίστα, επισκεφθείτε το Εγχειρίδιο επιλογέων CSS.

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

Αποτελεσμα

Τύπος Περιγραφή
Οντότητα

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

Αν δεν βρεθεί ταιριάζον αποτέλεσμα, επιστρέφεται null.

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

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

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

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

Η HTMLCollection είναιΔελτίο στοιχείωνΚολλεκτίβα.

Η NodeList είναιΔελτίοΚολλεκτίβα (εлементικόν, ιδιότητας και κείμενο).

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

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

Η HTMLCollection είναι πάνταΠραγματικήΚολλεκτίβα.

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

Η NodeList είναι συνήθωςΣτατικήΚολλεκτίβα.

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

getElementsByClassName() και getElementsByTagName() Όλες οι μεθόδοι επιστρέφουν μια πραγματική HTMLCollection.

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

childNodes Ο χαρακτηριστής επιστρέφει μια πραγματική NodeList.

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

document.querySelector() Είναι χαρακτηριστικό DOM Level 1 (1998).

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

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

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

Εκμάθηση:

Επιλογείς CSS

Εγχειρίδιο επιλογέων CSS

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

Μέθοδος QuerySelector:

Μέθοδος querySelector():

Μέθοδος querySelectorAll():

Μέθοδος GetElement:

Μέθοδος getElementById()

Μέθοδος getElementsByTagName()

Μέθοδος getElementsByClassName()