Пусть у нас есть некоторый элемент родитель, а внутри него другие элементы:
<div id="parent">
<div class="child">text</p>
<div class="child">text</p>
<div class="child">text</p>
</div>
Пусть ссылка на родитель уже получена в переменную:
let parent = document.querySelector('#parent');
В таком случае, при необходимости мы можем
выполнить поиск по селектору внутри этого
родителя, а не по всему документу. Для этого
метод для поиска нужно применить не к document
,
а к переменной, содержащей нашего родителя.
Давайте для примера найдем внутри нашего
родителя элементы с классом child
:
let elems = parent.querySelectorAll('.child');
Конечно же, эти элементы можно найти, выполнив поиск по всему документу с более точным селектором:
let elems = document.querySelectorAll('#parent .child');
Иногда, однако, поиск по конкретному элементу все-таки удобнее. Мы это еще будем использовать в дальнейшем в практических задачах.
Дан элемент #parent
:
<div id="parent">
<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p class="ggg">text</p>
<p class="ggg">text</p>
<p class="ggg">text</p>
</div>
let parent = document.querySelector('#parent');
Найдите внутри родителя элементы с классом
www
и запишите их в переменную elems1
.
Затем найдите внутри родителя элементы с
классом ggg
и запишите их в переменную
elems2
.