Page 113 - 6108
P. 113
Для пошуку елементів на сторінці використовуються наступні методи:
getElementById(value) – вибирає елемент, у якого атрибут id рівний
value
getElementsByTagName(value) – вибирає всі елементи, у яких тег
рівний value
getElementsByClassName(value) –: вибирає всі елементи, що мають
класс value
querySelector(value) – вибирає перший елемент, який відповідає css-
селектору value
querySelectorAll(value) – вибирає всі елементи, які відповідають css-
селектору value
Метод document.getElementById(id) шукає в цілому документі
елемент заданим атрибутом id. Якщо елемент має спеціальний атрибут id, то
можна отримати його прямо по змінної з ім'ям, яке відповідає значення id, але
краще скористатися відповідним методом.
let table = document.getElementById("forecast-table");
Метод elem.getElementsByTagName(tagName) повертає живу
колекцію елементів HTMLCollection, за іменем тега. Пошук здійснюється в
піддереві зазначеного елемента (elem), в результат пошуку не влучає сам
елемент, в піддереві якого здійснювався пошук. Повертає живий список, який
автоматично оновлюється при зміні DOM.
При виклику метод getElementsByTagName(tagName) переводить
аргумент tagName за яким здійснюється пошук в нижній регістр до того як
почати пошук. Це небажано, коли необхідно використовувати метод для
пошуку SVG елементів, де в найменуванні тегу може використовуватися
верблюжа (camel-cased) нотація. У цьому випадку правильно використовувати
метод Element.getElementsByTagNameNS ().
let table = document.getElementById("forecast-table");
let cells = table.getElementsByTagName("td");
Mетод getElementsByTagName() може шукати всередині будь-якого
елементу.
Метод elem.getElementsByClassName (className) повертає
колекцію елементів HTMLCollection з класом className. Знаходить елемент
і в тому випадку, якщо у нього кілька класів, а шуканий - один з них. Якщо
викликаний на об'єкті document, будуть повернуті всі елементи, що містяться в
документі.
//всі елементи з класом test
element.getElementsByClassName('test');
//всі елементи з класом test, які знаходяться в елементі з id
main
document.getElementById('main').getElementsByClassName('test')
;
Метод elem.querySelectorAll(css) повертає всі елементи всередині
elem, що задовольняють CSS-селектору css.