Selektorët kompleksë të elementit DOM në JavaScript

Le të bëjmë diçka më komplekse. Le të themi, për shembull, se kemi këtë kod HTML:

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

Le të marrim një referencë për input-in që ndodhet brenda bllokut #parent:

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

Siç mund ta shihni, ne morëm input-in tonë nga selektori #parent input. Në fakt, ky selektor CSS përfshin të gjitha input-et që ndodhen në #parent.

Le të themi, për shembull, se kemi dy input-e të tillë:

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

Atëherë, nëse shkruani selektorin #parent input në kodin CSS, ai do të prekë të dy input-et tona:

css#parent input {
  color: red;
}

Sidoqoftë, metoda querySelector nuk funksionon në këtë mënyrë. Ajo gjithmonë merr vetëm një element - të parin që përshtatet me selektorin e specifikuar. Le ta shohim me një shembull. Le të themi se kemi input-e me klasën elem:

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

Le të marrim të parin nga këto input-e:

javascriptlet elem = document.querySelector('.elem');
console.log(elem); // këtu do të jetë input-i i parë

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>