DOM տարրի բարդ ընտրիչները JavaScript-ում

Եկեք անենք մի բան, որն ավելի բարդ է: Օրինակ, ենթադրենք, մենք ունենք հետևյալ HTML կոդը:

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

Եկեք ստանանք հղում դեպի այն input-ը, որը գտնվում է #parent բլոկի ներսում.

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

Ինչպես տեսնում եք, մենք ստացանք մեր input-ը ընտրիչի միջոցով #parent input: Փաստորեն, այս CSS ընտրիչին համապատասխանում են #parent-ում գտնվող բոլոր input-ները:

Օրինակ, ենթադրենք, մենք ունենք երկու այդպիսի input.

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

Այնուհետև, եթե CSS կոդում գրենք #parent input ընտրիչը, այն կանդրադառնա մեր երկու input-ների վրա.

#parent input {
	color: red;
}

Սակայն querySelector մեթոդը աշխատում է այլ կերպ: Այն միշտ ստանում է միայն մեկ տարր՝ առաջինը, որը համապատասխանում է նշված ընտրիչին: Եկեք նայենք օրինակով: Ենթադրենք, մենք ունենք elem դասի input-ներ.

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

Եկեք ստանանք այս input-ներից առաջինը.

let elem = document.querySelector('.elem');
console.log(elem); // այստեղ կլինի առաջին input-ը

Տրված է հետևյալ HTML-ը.

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

Ստացեք հղում դեպի առաջին պարբերությունը div-ից, որի id-ն հավասար է block-ի:

Տրված է հետևյալ HTML-ը.

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

Ստացեք հղում դեպի առաջին պարբերությունը div-ից, որն ունի block դասը:

Տրված է հետևյալ HTML-ը.

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

Ստացեք հղում դեպի առաջին պարբերությունը, որն ունի www դասը: