40. Відносний пошук

Пошук елементів відносно вибраного.

Потрібно враховувати, що більшість браузерів будуть трактувати пробіли та перехід на новий рядок, як текстові вузли і вони впливатимуть на відлік вузлів. Вибір наступного та попереднього саме елементів здійснюється з використанням nextElementSibling та previousElementSibling відповідно

nextSibling - вибір наступного вузла
nextElementSibling - вибір наступного вузла, який є елементом (пробіли і переведення рядків не враховуються)
previousSibling - вибір попереднього вузла
nextElementSibling - вибір наступного вузла, який є елементом (пробіли і переведення рядків не враховуються)
parentNode - вибір батьківського вузла
firstChild - вибір першого дочірнього елементу
lastChild - вибір останнього дочірнього елементу closest - батьківського елементу по селектору на всіх рівнях
contains - перевірка на всіх нижніх рівнях наявності відповідного елементу в середині батьківського блоку (повертає true або false)

Приклади

nextSibling - вибір наступного вузла

Пробіли і переведення рядків - це тектові вузли.

.dd

let elem1=document.querySelector('.dd').nextSibling;
 elem1.style.background = 'yellow';

nextElementSibling - вибір наступного вузла, який є елементом (пробіли і переведення рядків не враховуються)

.de

 let el_1=document.querySelector('.de').nextElementSibling;
 el_1.style.background = 'yellow';

previousSibling - вибір попереднього вузла

У якості попереднього вузла виступають також пробіли та переведення рядків

.ss

let elem2=document.querySelector('.ss').previousSibling;
 elem2.style.background = 'yellow';

previousElementSibling - вибір попереднього вузла, який є елементом (пробіли і переведення рядків не враховуються)

.sp

let el_2=document.querySelector('.sp').previousElementSibling;
 el_2.style.background = 'yellow';

parentNode - вибір батьківського вузла

.rr

let elem3=document.querySelector('.rr').parentNode;
 elem3.style.background = 'yellow';

firstChild - вибір першого дочірнього елементу

Пробіли і переведення рядків також враховуються, як вузли

.rk

let elem4=document.querySelector('.rk').firstChild;
 elem4.style.background = 'yellow';

lastChild - вибір останнього дочірнього елементу

Пробіли і переведення рядків також враховуються, як вузли

.zz

let elem5=document.querySelector('.zz').lastChild;
 elem5.style.background = 'yellow';

closest - батьківського елементу по селектору на всіх рівнях

Для найменшого блоку з класом .jsb найдем батьківський елемент з класом .su (розташований через 1 рівень)

.su

.jsb

 let elem6 = document.querySelector('.jsb');
let parent = elem6.closest('.su');
parent.style.background = 'yellow';

contains - перевірка на всіх нижніх рівнях наявності відповідного елементу в середині батьківського блоку (повертає true або false)

Для батьківського блоку з класом .wq перевіремо наявність на всіх рівнях вкладеного (дочірнього) елементу з класом .с1 (розташований через 1 рівень)

.wq

.c1

 let parent7 = document.querySelector('.wq');
  let child7 = document.querySelector('.c1');

let contains = parent7.contains(child7);
 document.querySelector('#res').innerHTML = contains;

далі ✏