HTML DOM querySelector() Methode
❮ Das Element-ObjektBeispiel
Ändern Sie den Text des ersten untergeordneten Elements mit class="example" in einem <div>-Element:
var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die Methode querySelector() gibt das erste untergeordnete Element zurück, das mit einem oder mehreren angegebenen CSS-Selektoren eines Elements übereinstimmt.
Hinweis: Die Methode querySelector() gibt nur das erste Element zurück, das mit den angegebenen Selektoren übereinstimmt. Um alle Übereinstimmungen zurückzugeben, verwenden Sie stattdessen die Methode querySelectorAll() .
Weitere Informationen zu CSS-Selektoren finden Sie in unserem Tutorial zu CSS-Selektoren und in unserer CSS-Selektoren-Referenz .
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Verfahren vollständig unterstützt.
| Method | |||||
|---|---|---|---|---|---|
| querySelector() | 4.0 | 8.0 | 3.5 | 3.2 | 10.0 |
Syntax
element.querySelector(CSS selectors)
Parameterwerte
| Parameter | Type | Description |
|---|---|---|
| CSS selectors | String | Required. Specifies one or more CSS selectors to match the element. These are used to select HTML
elements based on their id, classes, types, attributes, values of attributes,
etc. For multiple selectors, separate each selector with a comma. The returned element depends on which element that is first found in the document (See "More Examples"). Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference. |
Technische Details
| DOM-Version: | Selektoren Ebene 1 Elementobjekt |
|---|---|
| Rückgabewert: | Das erste Element, das mit den angegebenen CSS-Selektoren übereinstimmt. Wenn keine Übereinstimmungen gefunden werden, wird null zurückgegeben. Löst eine SYNTAX_ERR-Ausnahme aus, wenn der/die angegebene(n) Selektor(en) ungültig ist/sind. |
Mehr Beispiele
Beispiel
Ändern Sie den Text des ersten <p>-Elements in einem <div>-Element:
var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";
Beispiel
Ändern Sie den Text des ersten <p>-Elements mit class="example" in einem <div>-Element:
var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";
Beispiel
Ändern Sie den Text eines Elements mit id="demo" in einem <div>-Element:
var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";
Beispiel
Fügen Sie dem ersten <a>-Element, das ein Zielattribut innerhalb eines <div>-Elements enthält, einen roten Rahmen hinzu:
var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";
Beispiel
Dieses Beispiel zeigt, wie mehrere Selektoren funktionieren.
Angenommen, Sie haben zwei Elemente: ein <h2>- und ein <h3>-Element.
Der folgende Code fügt dem ersten <h2>-Element in <div> eine Hintergrundfarbe hinzu:
<div id="myDIV">
<h2>A h2 element</h2>
<h3>A h3 element</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";
Wenn jedoch das <h3>-Element vor dem <h2>-Element in <div> platziert wurde. Das Element <h3> erhält die rote Hintergrundfarbe.
<div id="myDIV">
<h3>A h3 element</h3>
<h2>A h2 element</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";
Verwandte Seiten
CSS-Tutorial: CSS-Selektoren
CSS-Referenz: CSS-Selektoren-Referenz
JavaScript-Tutorial: JavaScript-HTML-DOM-Knotenliste
JavaScript-Referenz: document.querySelector()
JavaScript-Referenz: element .querySelectorAll()
HTML-DOM-Referenz: document.querySelectorAll()
❮ Das Element-Objekt