Пошук елементів відносно вибраного.
nextSibling - вибір наступного вузла
nextElementSibling - вибір наступного вузла, який є елементом (пробіли і переведення рядків не враховуються)
previousSibling - вибір попереднього вузла
nextElementSibling - вибір наступного вузла, який є елементом (пробіли і переведення рядків не враховуються)
parentNode - вибір батьківського вузла
firstChild - вибір першого дочірнього елементу
lastChild - вибір останнього дочірнього елементу closest - батьківського елементу по селектору на всіх рівнях
contains - перевірка на всіх нижніх рівнях наявності відповідного елементу в середині батьківського блоку (повертає true або false)
Приклади
nextSibling - вибір наступного вузла
Пробіли і переведення рядків - це тектові вузли.
let elem1=document.querySelector('.dd').nextSibling; elem1.style.background = 'yellow';
nextElementSibling - вибір наступного вузла, який є елементом (пробіли і переведення рядків не враховуються)
let el_1=document.querySelector('.de').nextElementSibling; el_1.style.background = 'yellow';
previousSibling - вибір попереднього вузла
У якості попереднього вузла виступають також пробіли та переведення рядків
let elem2=document.querySelector('.ss').previousSibling; elem2.style.background = 'yellow';
previousElementSibling - вибір попереднього вузла, який є елементом (пробіли і переведення рядків не враховуються)
let el_2=document.querySelector('.sp').previousElementSibling; el_2.style.background = 'yellow';
parentNode - вибір батьківського вузла
let elem3=document.querySelector('.rr').parentNode; elem3.style.background = 'yellow';
firstChild - вибір першого дочірнього елементу
Пробіли і переведення рядків також враховуються, як вузли
let elem4=document.querySelector('.rk').firstChild; elem4.style.background = 'yellow';
lastChild - вибір останнього дочірнього елементу
Пробіли і переведення рядків також враховуються, як вузли
let elem5=document.querySelector('.zz').lastChild; elem5.style.background = 'yellow';
closest - батьківського елементу по селектору на всіх рівнях
Для найменшого блоку з класом .jsb найдем батьківський елемент з класом .su (розташований через 1 рівень)let elem6 = document.querySelector('.jsb'); let parent = elem6.closest('.su'); parent.style.background = 'yellow';
contains - перевірка на всіх нижніх рівнях наявності відповідного елементу в середині батьківського блоку (повертає true або false)
Для батьківського блоку з класом .wq перевіремо наявність на всіх рівнях вкладеного (дочірнього) елементу з класом .с1 (розташований через 1 рівень)let parent7 = document.querySelector('.wq'); let child7 = document.querySelector('.c1'); let contains = parent7.contains(child7); document.querySelector('#res').innerHTML = contains;
далі ✏