Вбудовані властивості і методи об'єкта document дозволяють знайти будь-який елемент на сторінці і зробити з ним необхідні дії. Наприклад, у кожного елемента є властивість style. яке дозволяє змінювати CSS-стилі елемента.
Елементи верхнього рівня
До елементів верхнього рівня можна звернутися безпосередньо, використовуючи властивості об'єкта document:
- document.documentElement - для звернення до елементу .
- document.head - для звернення до елементу .
- document.body - для звернення до елементу .
До елементу сторінки можна звернутися раніше, ніж він відобразиться в браузері.
DOM-структура документа створюється в міру виведення сторінки на екран. Якщо елемент ще не відображений в браузері, значить його немає в дереві DOM. Відповідно, до такого елементу не можна звернутися. При виконанні наступного скрипта нічого не станеться:
Це пояснюється тим, що в момент виконання скрипта елемента
не існує.Виконання скрипта має починатися тільки після виведення змінюваного елемента на екран.
Пошук елементів
Для звернення до будь-якого елементу сторінки в DOM інтерфейсі введені спеціальні пошукові методи. Пошук може здійснюється за різними параметрами елементів, тому за допомогою них можна знайти будь-який елемент.
getElementById ()
Об'єкт document має вбудований метод getElementById (). Він виконує пошук елемента за його унікальним ідентифікатором id.
document.getElementById (ідентифікатор) ідентифікатор Рядок, що містить унікальний ідентифікатор.
Lorem ipsum dolor.
Deleniti sit veniam.
Lorem ipsum dolor.
Deleniti sit veniam.
Оперування глобальними змінними може привести до помилок в програмі. Більш правильним є використання document.getElementById ().
Даний метод працює дуже швидко, так як браузер сам створює посилання на елементи з атрибутом id.
Щоб пошук по id працював правильно, ідентифікатор дійсно повинен бути унікальним. У документі не може бути кілька елементів з однаковим id.
getElementsByName ()
Об'єкт document має вбудований метод getElementsByName (). Пошук ведеться по всіх елементах сторінки із заданим атрибутом name. Метод повертає список всіх елементів, чий атрибут name задовольняє запиту.
document.getElementsByName (ім'я) ім'я Рядок, що містить ім'я елемента (атрибут name).
Lorem ipsum dolor.
Deleniti sit veniam.
Результуючий список автоматично оновлюється при зміні вмісту сторінки.
getElementsByTagName ()
Для будь-якого елементу сторінки доступний метод getElementsByTagName (). Даний метод виконує пошук по тегу. При його виклику пошук ведеться всередині даного елемента. Метод повертає список всіх елементів, що задовольняють запиту.
element. getElementsByTagName (тег) тег Рядок, що містить ім'я тега.
У пошуковому запиті регістр букв не має значення. Якщо в запиті передати зірочку *. то метод поверне всіх нащадків даного елемента.
Lorem ipsum dolor.
Deleniti sit veniam.
Результуючий список автоматично оновлюється при зміні вмісту сторінки.
getElementsByClassName ()
Для будь-якого елементу сторінки доступний метод getElementsByClassName (). Даний метод виконує пошук по глобальному атрибуту class. При його виклику пошук ведеться всередині даного елемента. Метод повертає список всіх елементів із зазначеним класом.
element. getElementsByClassName (клас) клас Рядок, що містить ім'я класу.
Lorem ipsum dolor.
Deleniti sit veniam.
Результуючий список автоматично оновлюється при зміні вмісту сторінки.
querySelectorAll ()
Для будь-якого елементу сторінки доступний метод querySelectorAll (). Метод повертає список всіх елементів, що задовольняють заданій CSS-селектору. При його виклику пошук ведеться всередині даного елемента.
element. querySelectorAll (селектор) селектор Рядок, що містить CSS-селектор.
Lorem ipsum dolor.
Deleniti sit veniam.
Цей метод є найпоширенішим, так як їм можна замінити будь-який з перерахованих вище методів.
Даний метод має високу продуктивність, але результуючий список не оновлюється при зміні вмісту сторінки.
querySelector ()
Для будь-якого елементу сторінки доступний метод querySelector (). Метод повертає перший елемент, що задовольняє заданому CSS-селектору. При його виклику пошук ведеться всередині даного елемента.
element. querySelector (селектор) селектор Рядок, що містить CSS-селектор.
Основна перевага даного методу щодо querySelectorAll () в тому, що він зупиняється при першому знайденому збігу. Це дозволяє збільшити продуктивність. Наприклад, якщо наперед відомо, що результат буде складатися з одного елемента, то краще скористатися даним методом.
Lorem ipsum dolor.
Deleniti sit veniam.
Для будь-якого елементу сторінки доступний метод closest (). Як і querySelector (). метод повертає перший елемент, що задовольняє заданому CSS-селектору. Але пошук ведеться не всередині даного елемента, а навпаки - вгору по ієрархії DOM. При цьому сам елемент, на якому викликаний метод, теж бере участь в перевірці.
element. closest (селектор) селектор Рядок, що містить CSS-селектор.
Принцип роботи методу такий:
- Спочатку перевіряється сам елемент, на якому викликається метод.
- Далі перевіряється батько даного елемента. Потім батько батька і так далі.
- Метод зупиняється на першому знайденому елементі і повертає його.