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

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

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

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

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

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

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

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

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

css#parent input {
  color: red;
}

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

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

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

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

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

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

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