HTML DOM querySelector() Metode

Voorbeeld

Verander die teks van die eerste kind element met class="example" in 'n <div> element:

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

Meer "Probeer dit self" voorbeelde hieronder.

Definisie en gebruik

Die querySelector() metode gee die eerste kind element terug wat pas by 'n gespesifiseerde CSS keurder(s) van 'n element.

Let wel: Die querySelector() metode gee slegs die eerste element terug wat by die gespesifiseerde keurders pas. Om al die passings terug te gee, gebruik eerder die querySelectorAll() metode.

Vir meer inligting oor CSS Selectors, besoek ons CSS Selectors Tutoriaal en ons CSS Selectors Reference .

Blaaierondersteuning

Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die metode ten volle ondersteun.

Method
querySelector()	4.0	8.0	3.5	3.2	10.0

Sintaksis

element.querySelector(CSS selectors)

Parameterwaardes

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.

Tegniese besonderhede

DOM weergawe:	Kiesers Vlak 1 Element Voorwerp
Terugkeerwaarde:	Die eerste element wat by die gespesifiseerde CSS-keurder(s) pas. Indien geen passings gevind word nie, word nul teruggestuur. Gooi 'n SYNTAX_ERR-uitsondering as die gespesifiseerde kieser(s) ongeldig is.

Meer voorbeelde

Voorbeeld

Verander die teks van die eerste <p>-element in 'n <div>-element:

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

Voorbeeld

Verander die teks van die eerste <p>-element met class="example" in 'n <div>-element:

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

Voorbeeld

Verander die teks van 'n element met id="demo" in 'n <div>-element:

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

Voorbeeld

Voeg 'n rooi rand by die eerste <a>-element wat 'n teikenkenmerk binne 'n <div>-element het:

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

Voorbeeld

Hierdie voorbeeld demonstreer hoe veelvuldige keurders werk.

Aanvaar dat jy twee elemente het: 'n <h2> en 'n <h3> element.

Die volgende kode sal 'n agtergrondkleur by die eerste <h2>-element in <div> voeg:

<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";

As die <h3>-element egter voor die <h2>-element in <div> geplaas is. Die <h3>-element is die een wat die rooi agtergrondkleur sal kry.

<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";