HTML Διαδραστικό Στοιχείο Ερωτήσεων querySelector() Μέθοδος

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

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

Λαμβάνοντας υπόψη

querySelector() Η μέθοδος επιστρέφει μόνο το πρώτο στοιχείο που ταιριάζει με τον καθορισμένο επιλογέα. Για να επιστρέψετε όλα τα ταιριάζοντα στοιχεία, παρακαλώ χρησιμοποιήστε Μέθοδος querySelectorAll().

Δείτε επίσης:

Χρήσιμος οδηγός

Ατрибούτο classList

Ατрибούτο className

Μέθοδος querySelectorAll()

Μέθοδος getElementsByTagName()

Μέθοδος getElementsByClassName()

Όντα Style του HTML DOM

Εκμάθηση:

Γλώσσα CSS

Επιλογέας CSS

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

Παράδειγμα

Παράδειγμα 1

Αλλαγή του κειμένου του πρώτου υποστοιχείου με class="example" στο στοιχείο <div>:

var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";

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

Περισσότερες παραδείξεις παρατίθενται παρακάτω στην ιστοσελίδα.

Γραμματική

στοιχείο.querySelector(CSSselectors)

Παράμετροι

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

Απαιτείται. Σtring. Καθορίζει έναν ή περισσότερους επιλογείς CSS για την ταιριάσματα στοιχείων.

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

Για πολλαπλούς επιλογείς, παρακαλώ διαχωρίστε τους με κόμμα.

Το στοιχείο που επιστρέφεται εξαρτάται από το στοιχείο που βρίσκεται πρώτο στο έγγραφο (βλέπε παρακάτω "Περισσότερες παραδείξεις").

Συμβουλή:Για πλήρη λίστα επιλογέων CSS, παρακαλώ δείτε το Εγχειρίδιο Επιλογέα CSS.

Τεχνικές λεπτομέρειες

Αποτελεσματικός

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

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

Αν ο καθορισμένος επιλογέας είναι μη έγκυρος, τότε προκαλείται η εξαίρεση SYNTAX_ERR.
Έκδοση DOM: Επίπεδο 1 Στοιχεία Επιλογέων

Περισσότερες παραδείξεις

Παράδειγμα 2

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

var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";

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

Παράδειγμα 3

Αλλαγή του κειμένου της πρώτης <p> στο στοιχείο <div> με class="example":

var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";

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

Παράδειγμα 4

Αλλαγή του κειμένου στο στοιχείο <div> με id="demo":

var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";

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

Παράδειγμα 5

Προσθέστε κόκκινη χάρα στο πρώτο στοιχείο <a> μέσα στο στοιχείο <div> που έχει το χαρακτηριστικό target:

var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";

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

Παράδειγμα 6

Αυτό το παράδειγμα δείχνει πώς λειτουργούν πολλαπλοί επιλογείς.

Ας υποθέσουμε ότι έχετε δύο στοιχεία: στοιχεία <h2> και <h3>.

Το παρακάτω κώδικας θα προσθέσει χρώμα υποβάθμισης στο πρώτο στοιχείο <h2> μέσα στο <div>:

<div id="myDIV">
  <h2>Ένα στοιχείο h2</h2>
  <h3>Ένα στοιχείο h3</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

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

Παράδειγμα 7

Αλλά, αν το στοιχείο <h3> μέσα στο <div> τοποθετηθεί πριν από το στοιχείο <h2>, το στοιχείο <h3> θα αποκτήσει κόκκινη υποβάθμιση.

<div id="myDIV">
  <h3>Ένα στοιχείο h3</h3>
  <h2>Ένα στοιχείο h2</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

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

Υποστήριξη προγράμματος περιήγησης

Τα αριθμήματα στη τάβλη αναφέρουν την έκδοση του πρώτου προγράμματος περιήγησης που υποστηρίζει αυτή τη μέθοδο.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 8.0 3.5 3.2 10.0

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

Εκμάθηση CSS:Επιλογέας CSS

Εγχειρίδιο CSS:Εγχειρίδιο Επιλογέα CSS

Εκμάθηση JavaScript:Λίστα κόμβων JavaScript HTML DOM

Εγχειρίδιο JavaScript:document.querySelector()

Εγχειρίδιο JavaScript:element.querySelectorAll()

Εγχειρίδιο HTML DOM:document.querySelectorAll()