Beispiel
Ändern Sie den Text des ersten Kindes Element mit class = "Beispiel" in einem <div> Element:
var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML
= "Hello World!"; Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Die querySelector() Methode gibt das erste Kind - Element , das einen bestimmten CSS paßt selector(s) ein Element.
Anmerkung: Die querySelector() Methode liefert nur das erste Element, die die angegebenen Selektoren übereinstimmt. Um wieder alle Spiele, verwenden Sie die querySelectorAll() Methode statt.
Weitere Informationen über CSS - Selektoren, besuchen Sie unsere CSS - Selektoren Tutorial und unsere CSS - Selektoren Referenz .
Browser-Unterstützung
Die Zahlen in der Tabelle gibt die erste Browser-Version, die das Verfahren vollständig unterstützt.
| Methode | |||||
|---|---|---|---|---|---|
| querySelector() | 4.0 | 8.0 | 3.5 | 3.2 | 10.0 |
Syntax
element .querySelector( CSS selectors )Parameterwerte
| Parameter | Art | Beschreibung |
|---|---|---|
| CSS selectors | String | Erforderlich. Gibt ein oder mehr CSS-Selektoren, das Element zu entsprechen. Diese werden verwendet, um HTML-Elemente auswählen, basierend auf ihrer ID, Klassen, Typen, Attribute, Werte von Attributen usw. Für mehrere Selektoren Trennen jeden Selektor mit einem Komma. Das zurückgegebene Element hängt von dem Element , das zuerst im Dokument gefunden wird (See "More Examples") . Tipp: Eine Liste aller CSS - Selektoren, einen Blick auf unsere CSS - Selektoren Referenz . |
Technische Details
| DOM Version: | Selektoren Stufe 1 Element Object |
|---|---|
| Rückgabewert: | Das erste Element, das den angegebenen CSS passt selector(s) . Wenn keine Übereinstimmungen gefunden werden, wird null zurückgegeben. Wirft eine SYNTAX_ERR Ausnahme , wenn der angegebene selector(s) ungültig ist. |
Mehr Beispiele
Beispiel
Ändern Sie den Text des ersten <p> Element in einem <div> Element:
var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML
= "Hello World!"; Versuch es selber " Beispiel
Ändern Sie den Text des ersten <p> Element mit class = "Beispiel" in einem <div> Element:
var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML
= "Hello World!"; Versuch es selber " 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!";
Versuch es selber " Beispiel
Fügen Sie einen roten Rahmen auf das erste <a> Element , das ein Zielattribut innerhalb eines hat <div> Elements:
var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border
= "10px solid red"; Versuch es selber " Beispiel
Dieses Beispiel zeigt, wie mehrere Selektoren arbeiten.
Angenommen, Sie zwei Elemente: ein <h2> und <h3> Element.
Der folgende Code wird eine Hintergrundfarbe mit dem ersten hinzufügen <h2> Elemente in <div> :
<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"; Versuch es selber " Wenn jedoch das <h3> Element wurde vor dem platziert <h2> Element in <div> . Das <h3> Element ist derjenige, der die rote Hintergrundfarbe erhalten wird.
<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"; Versuch es selber " Verwandte Seiten
CSS Tutorial: CSS - Selektoren
CSS Referenz: CSS - Selektoren Referenz
JavaScript Tutorial: JavaScript HTML DOM Node List
JavaScript Referenz: Dokument. querySelector()
JavaScript Referenz: Element. querySelectorAll()
HTML DOM Referenz: Dokument. querySelectorAll()