JavaScript-da DOM elementiniň çylşyýumly selektorlary

Geliň, has çylşyýumly bir zat edeliň. Mysal üçin, bizde şeýle HTML kody bolsun:

<div id="parent">
	<input>
</div>

Geliň, içinde ýerleşýän input-a #parent çykgydyny alalyň:

let elem = document.querySelector('#parent input');
console.log(elem);

Görşüňiz ýaly, biz input-y selektor bilen aldyk #parent input. Aslynda, bu CSS selektory #parent içinde ýerleşýän ähli input-lary alar.

Mysal üçin, bizde iki şeýle input bolsun:

<div id="parent">
	<input value="1">
	<input value="2">
</div>

Onda, CSS kodunda #parent input selektoryny ýazsak, ol ikimiz hem alar input-larymyz:

#parent input {
	color: red;
}

Usul querySelector, şonda-da, şeýle işlemeýär. Ol ähli wagt diňe bir element alýar - görkezilen selektora ýeten birinji element. Mysal üçin serediň. Bizde elem klassy bolan input-lar bolsun:

<input class="elem">
<input class="elem">

Geliň, şu input-laryň birinjisini alalyň:

let elem = document.querySelector('.elem');
console.log(elem); // bu ýerde birinji input bolar

Aşakdaky HTML berlen:

<div id="block">
	<p>1</p>
	<p>2</p>
</div>

id-si block deň bolan div-den birinji abzasyň çykgydyny alyň.

Aşakdaky HTML berlen:

<div class="block">
	<p>1</p>
	<p>2</p>
</div>

block klassy bolan div-den birinji abzasyň çykgydyny alyň.

Aşakdaky HTML berlen:

<p class="www">text</p>
<p class="www">text</p>

www klassy bolan birinji abzasyň çykgydyny alyň.