Властивості навігації по DOM хороші, коли елементи розташовані поруч. А що, як ні? Як отримати вільний елемент сторінки? Для цього у DOM є додаткові методи пошуку. Для вибору чи розміщення значень, на Web-сторінці, необхідно вміти звернутися до елементів цієї сторінки (документу).
Є 6 основних методів пошуку елементів у DOM:
| Метод | Параметр(шукає по...) | Шукає де?(всередині елемента?) | Що повертає? |
|---|---|---|---|
| querySelector | CSS-selector | всередині елемента | - |
| querySelectorAll | CSS-selector | всередині елемента | - |
| getElementById | id | - | - |
| getElementsByName | name | - | живу колекцію |
| getElementsByTagName | tag or '*' | всередині елемента | живу колекцію |
| getElementsByClassName | class | всередині елемента | живу колекцію |
Живі колекції - це такі колекції, які завжди відображають поточний стан документа та автоматично оновлюються при його зміні.
Властивості навігації по DOM хороші, коли елементи розташовані поруч. А що, як ні? Як отримати довільний елемент сторінки?Для цього в DOM є додаткові методи пошуку.
Для вибору або розміщення значень, на Web-сторінці, необхідно вміти звернутися до елементів цієї сторінки (документу). Існує кілька способів звернення до об'єктів документа. Найпростіший спосіб полягає в тому, щоб звернутися до об'єкта на ім'я. Тому потрібно кожному елементу (об'єкту) надати ім'я. Для цього використовується атрибут id
Приклад:
| <p id=”first”> |
|---|
Наприклад, якщо ми хочемо звернутися до елемента з ім'ям ”first”, то будемо використовувати наступне посилання:
| document.getElementById("first") |
|---|
Зверніть увагу, що всі ключові слова чутливі до регістру. У назві методу використовуються три літери у верхньому регістрі. Метод getElementById() відноситься до об'єкта document. З його допомогою ми можемо знайти будь-який елемент документа. Для розділення елементів ієрархічного посилання використовується крапка.
Якщо вам потрібний список усіх елементів, які відповідають зазначеним селекторам, використовуйте функцію querySelectorAll().
Код JavaScript може безпосередньо діяти на стиль елемента через властивість вузла style. Він містить об'єкт, що має властивості для всіх властивостей стилів. Їхні значення – рядки, в які ми можемо писати для зміни якогось аспекту стилю елемента.
Нехай у нас є сторінка з такою розміткою.
Попрацюємо з нею, використовуючи різні методи пошуку елементів та змінюючи стиль знайдених елементів.
Результат:
Якщо ми хочемо вибрати кілька елементів, потрібно використовувати атрибут name. Приклад:
| <input type="radio" id="c1" name="v">Перший <input type="radio" id="c2" name="v">Другий <input type="radio" id="c3" name="v">Третій |
|---|
Тож ми можемо сформувати масив радіокнопок:
| p=document.getElementsByName("v"); |
|---|
Змінна p це масив об'єктів, що містить три радіокнопки. Їх імена: p[0], p[1], p[2].
У всіх прикладах раніше ми працювали з методом getElementById, який отримував лише один елемент за його атрибутом id.
Однак існують інші способи отримання елементів, наприклад, за допомогою методу getElementsByTagName, який отримує групу тегів на їх ім'я. Цей спосіб повертає не один елемент, а масив елементів.
Дана сторінка, що містить абзаци та інші елементи. При натисканні на кнопку зробити колір шрифту абзаців червоним. При повторному натисканні повернути чорний колір. Одночасно змінювати напис на кнопці. Скрипт розмістити у окремому файлі.
Скрипт:
Змінна elems це масив абзаців. Нумерація елементів у масиві починається з нуля. Для встановлення властивостей кожного абзацу необхідно використовувати цикл.
Метод getElementsByClassName отримує елементи за їх класом (тобто за вмістом атрибуту class).
Дана сторінка, що містить абзаци та інші елементи. Деякі абзаци та заголовки належать до одного класу. При натисканні на кнопку зробити заливку елементів цього класу рожевою. При повторному натисканні зробити заливку бірюзовою. Одночасно змінювати напис на кнопці. Скрипт розмістити у окремому файлі.
Скрипт:
