HTML DOM Document querySelector()
Voorbeelden
Verkrijg het eerste <p> element:
document.querySelector("p");
Haal het eerste element op met class="example":
document.querySelector(".example");
Hieronder meer voorbeelden.
Definitie en gebruik
De querySelector()methode retourneert het eerste element dat overeenkomt met een CSS-selector.
Gebruik in plaats daarvan om alle overeenkomsten te retourneren (niet alleen de eerste) querySelectorAll().
Beide querySelector()en querySelectorAll()retourneer een NodeList .
Beide querySelector()en querySelectorAll()gooi een SYNTAX_ERR-uitzondering als de selector(s) ongeldig zijn.
zelfstudies:
De referentie voor CSS-kiezers
De zelfstudie over JavaScript-knooppunten
QuerySelector-methoden:
De Element querySelector() Methode
De Element querySelectorAll() Methode
De Document querySelector() Methode
De Document querySelectorAll() Methode
GetElement-methoden:
De Document getElementById() methode
HTML DOM NodeList / HTMLCollection
De verschillen tussen een HTMLCollection en een NodeList
Een NodeList en een HTMLCollection zijn beide array-achtige verzamelingen (lijsten) van knooppunten (elementen) die uit een document zijn geëxtraheerd. De knooppunten zijn toegankelijk via indexnummers. De index begint bij 0.
Beide objecten hebben een eigenschap length die het aantal elementen in de lijst retourneert.
Een HTMLCollection is een live collectie : als je een <li> element toevoegt aan een lijst in de DOM, zal de lijst in de HTMLCollection ook veranderen.
Een NodeList is een statische verzameling : als u een <li>-element toevoegt aan een lijst in de DOM, verandert de lijst in NodeList niet.
De getElementsByClassName()en getElementsByTagName()
methoden retourneren een HTMLCollection.
De querySelector()en querySelectorAll()
methoden retourneren een NodeList.
Syntaxis
document.querySelector(CSS selectors)
Parameters:
| Parameter | Description |
| CSS selectors |
Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples"). |
Winstwaarde
| Type | Beschrijving |
| Object | Een NodeList met het eerste element dat overeenkomt met de CSS-kiezer(s). Als er geen overeenkomsten worden gevonden, nullwordt geretourneerd. |
Meer voorbeelden
Haal het eerste <p> element binnen met class="example":
document.querySelector("p.example");
Wijzig de tekst van het element met id="demo":
document.querySelector("#demo").innerHTML = "Hello World!";
Selecteer het eerste <p>-element waarvan het bovenliggende element een <div>-element is.
document.querySelector("div > p");
Selecteer het eerste <a>-element met het kenmerk 'target':
document.querySelector("a[target]");
Selecteer de eerste <h3> of de eerste <h4>:
<h3>A h3 element</h3>
<h4>A h4 element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
Selecteer de eerste <h3> of de eerste <h4>:
<h4>A h4 element</h4>
<h3>A h3 element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
Browserondersteuning
document.querySelector()is een DOM Level 1 (1998)-functie.
Het wordt volledig ondersteund in alle browsers:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |