# Сложные селекторы DOM элемента в JavaScript

Давайте сделаем что-нибудь более сложное. Пусть, к примеру, у нас есть вот такой HTML код:

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

Давайте получим ссылку на инпут, находящийся внутри блока `#parent`:

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

Как вы видите, мы получили наш инпут по селектору `#parent input`. На самом деле под этот CSS селектор попадают все инпуты, находящиеся в `#parent`.

Пусть, к примеру, у нас два таких инпута:

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

Тогда, если написать селектор `#parent input` в CSS коде, он затронет оба наших инпута:

`#parent input { color: red; }`

Метод `querySelector`, однако, работает не так. Он всегда получает только один элемент - первый, попавший под указанный селектор. Давайте посмотрим на примере. Пусть у нас есть инпуты с классом `elem`:

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

Давайте получим первый из этих инпутов:

`let elem = document.querySelector('.elem'); console.log(elem); // здесь будет первый инпут`

Дан следующий HTML:

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

Получите ссылку на первый абзац из дива с `id`, равным `block`.

Дан следующий HTML:

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

Получите ссылку на первый абзац из дива с классом `block`.

Дан следующий HTML:

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

Получите ссылку на первый абзац с классом `www`.

← →
↑
en ru