HTML DOM querySelectorAll() Metode

Voorbeeld

Stel die agtergrondkleur van die eerste element met class="example" binne 'n <div>-element:

// Get the element with id="myDIV" (a div), then get all elements inside div with class="example"
var x = document.getElementById("myDIV").querySelectorAll(".example");

// Set the background color of the first element with class="example" (index 0) in div
x[0].style.backgroundColor = "red";

Meer "Probeer dit self" voorbeelde hieronder.

Definisie en gebruik

Die querySelectorAll()-metode gee 'n versameling van 'n element se kind-elemente terug wat ooreenstem met 'n gespesifiseerde CSS-keurder(s), as 'n statiese NodeList-objek.

Die NodeList-objek verteenwoordig 'n versameling nodusse. Die nodusse kan verkry word deur indeksnommers. Die indeks begin by 0.

Wenk: Jy kan die lengte -eienskap van die NodeList-objek gebruik om die aantal kindernodusse te bepaal wat by die gespesifiseerde keurder pas, dan kan jy deur alle nodusse lus en die inligting wat jy wil onttrek.

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
querySelectorAll()	4.0	9.0	3.5	3.2	10.0

Let wel: Internet Explorer 8 het ondersteuning vir CSS2-keurders. IE9 en later weergawes het ook ondersteuning vir CSS3.

Sintaksis

element.querySelectorAll(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. Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference.

Tegniese besonderhede

DOM weergawe:	Kiesers Vlak 1 Dokumentobjek
Terugkeerwaarde:	'n NodeList-objek, wat alle afstammelinge van die huidige element verteenwoordig wat by 'n gespesifiseerde CSS-keurder(s) pas. Die NodeList is 'n statiese versameling, wat beteken dat veranderinge in die DOM GEEN effek in die versameling het nie. Let wel: Gooi 'n SYNTAX_ERR-uitsondering as die gespesifiseerde kieser(s) ongeldig is

Meer voorbeelde

Voorbeeld

Kry alle <p>-elemente binne 'n <div>-element, en stel die agtergrondkleur van die eerste <p>-element (indeks 0):

// Get the element with id="myDIV" (a div), then get all p elements inside div
var x = document.getElementById("myDIV").querySelectorAll("p");

// Set the background color of the first <p> element (index 0) in div
x[0].style.backgroundColor = "red";

Voorbeeld

Kry alle <p> elemente in 'n <div> met class="example", en stel die agtergrond van die eerste <p> element:

// Get the element with id="myDIV" (a div), then get all p elements with class="example" inside div
var x = document.getElementById("myDIV").querySelectorAll("p.example");

// Set the background color of the first <p> element with class="example" (index 0) in div
x[0].style.backgroundColor = "red";

Voorbeeld

Vind uit hoeveel elemente met class="example" daar in 'n <div>-element is (gebruik die lengte-eienskap van die NodeList-objek):

/* Get the element with id="myDIV" (a div), then get all p elements with class="example" inside div, and return the number of elements found */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

Voorbeeld

Stel die agtergrondkleur van alle elemente met class="example" in 'n <div>-element:

// Get the element with id="myDIV" (a div), then get all elements with class="example" inside div
var x = document.getElementById("myDIV").querySelectorAll(".example");

// Create a for loop and set the background color of all elements with class="example" in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}

Voorbeeld

Stel die agtergrondkleur van alle <p>-elemente in 'n <div>-element:

// Get the element with id="myDIV" (a div), then get all p elements inside div
var x = document.getElementById("myDIV").querySelectorAll("p");

// Create a for loop and set the background color of all p elements in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}

Voorbeeld

Stel die randstyl van alle <a>-elemente in 'n <div>-element wat 'n "teiken"-kenmerk het:

// Get the element with id="myDIV" (a div), then get all <a> elements with a "target" attribute inside div
var x = document.getElementById("myDIV").querySelectorAll("a[target]");

// Create a for loop and set the border of all <a> elements with a target attribute in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.border = "10px solid red";
}

Voorbeeld

Stel die agtergrondkleur van alle <h2>-, <div>- en <span>-elemente in 'n <div>-element:

// Get the element with id="myDIV" (a div), then get all <h2>, <div> and <span> elements inside <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");

// Create a for loop and set the background color of all <h2>, <div> and <span> elements in <div>
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}