Metoda dotazu HTML DOMSelectorAll().

Příklad

Nastavte barvu pozadí prvního prvku pomocí class="example" uvnitř prvku <div>:

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

Další příklady „Vyzkoušejte si to sami“ níže.

Definice a použití

Metoda querySelectorAll() vrací kolekci podřízených prvků prvku, které odpovídají zadaným selektorům CSS, jako statický objekt NodeList.

Objekt NodeList představuje kolekci uzlů. K uzlům lze přistupovat pomocí indexových čísel. Index začíná na 0.

Tip: Můžete použít vlastnost length objektu NodeList k určení počtu podřízených uzlů, které odpovídají zadanému selektoru, pak můžete procházet všechny uzly a extrahovat požadované informace.

Další informace o selektorech CSS naleznete v našem výukovém programu selektorů CSS a v naší Referenční příručce selektorů CSS .

Podpora prohlížeče

Čísla v tabulce určují první verzi prohlížeče, která tuto metodu plně podporuje.

Method
querySelectorAll()	4.0	9.0	3.5	3.2	10.0

Poznámka: Internet Explorer 8 podporuje selektory CSS2. IE9 a novější verze mají také podporu pro CSS3.

Syntax

element.querySelectorAll(CSS selectors)

Hodnoty parametrů

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.

Technické údaje

Verze DOM:	Selektory Objekt dokumentu 1. úrovně
Návratová hodnota:	Objekt NodeList představující všechny potomkové prvky aktuálního prvku, který odpovídá zadanému selektoru CSS. NodeList je statická kolekce, což znamená, že změny v DOM nemají na kolekci ŽÁDNÝ vliv. Poznámka: Vyvolá výjimku SYNTAX_ERR, pokud je zadaný selektor(y) neplatný

Další příklady

Příklad

Získejte všechny prvky <p> do prvku <div> a nastavte barvu pozadí prvního prvku <p> (index 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";

Příklad

Získejte všechny prvky <p> do prvku <div> s class="example" a nastavte pozadí prvního prvku <p>:

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

Příklad

Zjistěte, kolik prvků s class="example" je v prvku <div> (pomocí vlastnosti length objektu NodeList):

/* 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;

Příklad

Nastavte barvu pozadí všech prvků pomocí class="example" v prvku <div>:

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

Příklad

Nastavte barvu pozadí všech prvků <p> v prvku <div>:

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

Příklad

Nastavte styl ohraničení všech prvků <a> v prvku <div>, které mají atribut „target“:

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

Příklad

Nastavte barvu pozadí všech prvků <h2>, <div> a <span> v prvku <div>:

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