Metoda HTML DOM querySelector().

Příklad

Změňte text prvního podřízeného prvku pomocí class="example" v prvku <div>:

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

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

Definice a použití

Metoda querySelector() vrací první podřízený prvek, který odpovídá zadaným selektorům CSS prvku.

Poznámka: Metoda querySelector() vrací pouze první prvek, který odpovídá zadaným selektorům. Chcete-li vrátit všechny shody, použijte místo toho metodu querySelectorAll() .

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
querySelector()	4.0	8.0	3.5	3.2	10.0

Syntax

element.querySelector(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. 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.

Technické údaje

Verze DOM:	Selektory úrovně 1 Element Object
Návratová hodnota:	První prvek, který odpovídá zadanému selektoru CSS. Pokud nejsou nalezeny žádné shody, vrátí se null. Vyvolá výjimku SYNTAX_ERR, pokud je zadaný selektor(y) neplatný.

Další příklady

Příklad

Změňte text prvního prvku <p> v prvku <div>:

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

Příklad

Změňte text prvního prvku <p> na class="example" v prvku <div>:

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

Příklad

Změňte text prvku pomocí id="demo" v prvku <div>:

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

Příklad

Přidejte červený okraj k prvnímu prvku <a>, který má v prvku <div> cílový atribut:

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

Příklad

Tento příklad ukazuje, jak fungují vícenásobné selektory.

Předpokládejme, že máte dva prvky: prvek <h2> a prvek <h3>.

Následující kód přidá barvu pozadí k prvnímu prvku <h2> v <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";

Pokud však byl prvek <h3> umístěn před prvkem <h2> v <div>. Prvek <h3> je ten, který získá červenou barvu pozadí.

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