Page 114 - 6108
P. 114
let matches = document.body.querySelectorAll('p'); // всі
елементи з тегом p, які знаходяться в тілі документа
let el = document.querySelector('#test');
let matches = el.querySelectorAll('div.highlighted > p'); //
всі елементи з тегом p, які знаходяться в елементі-контейнері з
тегом div (на будь-якому рівні вкладеності), що має клас
'highlighted'
Це один з найбільш часто використовуваних і корисних методів при роботі
з DOM.
Метод elem.querySelector(css) повертає не всі, а тільки перший
елемент, який відповідає CSS-селектору css. .Іначе кажучи, результат – такий
же, як і при elem.querySelectorAll(css)[0], але в останньому випадку
спочатку шукаються всі елементи, а потім береться перший, а в
elem.querySelector(css) шукається тільки перший, тобто він ефективніше.
Цей метод часто використовується, коли ми свідомо знаємо, що шуканий
елемент тільки один, і хочемо отримати в змінну відразу його.
Крім раніше розглянутих методів об'єкт document дозволяє звернутися до
певних елементів веб-сторінки через властивості:
documentElement – надає доступ до кореневого елементу <html>
body – надає доступ до елементу <body> на веб-сторінці
images – містить колекцію всіх об'єктів зображень (елементів img)
links – містить колекцію посилань - елементів <a> і <area>, у яких
визначено атрибут href
anchors – надає доступ до колекції елементів <a>, у яких визначено
атрибут name
forms – містить колекцію всіх форм на веб-сторінці
Ці властивості не надають доступ до всіх елементів, проте дозволяють
отримати найбільш часто використовувані елементи на веб-сторінці.
Наприклад, отримаємо кореневої вузол документа:
let images = document.images; //колекція елементів <img>
документу
let links = document.links; // колекція елементів <a> з
атрибутом href документу
Знайдені елементи можна перевірити на відповідність певному селектору
css або знайти за певним критеріїм його предків.
Метод element.matches(css) поверне true або false, залежно від того, чи
відповідає element зазначеному css-селектору.
<ul id="birds">
<li>Orange-winged parrot</li>
<li class="endangered">Philippine eagle</li>
<li>Great white pelican</li>
</ul>
let birds = document.getElementsByTagName('li');
for (let i = 0; i < birds.length; i++) {
if (birds[i].matches('.endangered')) {
console.log('The ' + birds[i].textContent + ' is
endangered!');}
}
