При побудові сторінки браузер бере інформацію про елементи з їх атрибутів. Але, крім того, всі елементи сторінки є об'єктами зі своїми властивостями, які також враховуються при відображенні елементів. DOM-інтерфейс дозволяє працювати і з атрибутами елементів і з їх властивостями. При цьому необхідно розуміти різницю між ними, знати, що і де використовувати.
атрибути елементів
У HTML-документах теги можуть мати певні атрибути з заданими значеннями. Атрибути можуть впливати на відображення елемента на сторінці або змінювати його призначення. Тому для маніпулювання елементами сторінки повинна бути надана можливість роботи з атрибутами HTML-тегів.
DOM-інтерфейс являє набір методів для роботи з атрибутами елементів.
hasAttribute (атрибут) Перевіряє наявність атрибута. getAttribute (атрибут) Повертає рядок зі значенням атрибута. setAttribute (атрибут, значення) Створює атрибут або привласнює йому нового значення. removeAttribute (атрибут) Видаляє атрибут.
Ці методи працюють саме з HTML-атрибутами як вони є в документі. Фактично, вони змінюють код сторінки. Тому для них справедливо:
- Значення атрибутів - це завжди рядка.
- Ім'я атрибута можна вказувати в будь-якому регістрі, так як HTML не пред'являє вимог до регістру символів в коді.
властивості елементів
На відміну від атрибутів:
- Значення властивості може бути будь-якого типу.
- Імена властивостей чутливі до регістру.
Зв'язок властивостей з атрибутами
В DOM-інтерфейсі поняття HTML-атрибутів і DOM-властивостей елементів тісно пов'язані. При створенні моделі сторінки для кожного елемента створюються однойменні з атрибутами властивості і присвоюються їм ті ж значення. Однак, це справедливо не для всіх атрибутів, що призводить до певної плутанини, але, частіше, це буває корисно.
При виведенні в вікні браузера параметри елемента залежать саме від його властивостей. Подальше управління елементами на сторінці здійснюється зміною цих властивостей. Тому в основному потрібно працювати з властивостями елементів, а не з артібутамі. Атрибути, зазвичай, використовуються для зберігання інформації.
Наприклад, поле для введення тексту має атрибут value. При побудові документа створюється елемент із властивістю value. яке має значення, вказане в HTML-коді сторінки. Текст для відображення в поле береться саме з властивості value. Якщо користувач вводить свій текст в поле, то властивість автоматично приймає нове поточне значення. При цьому код сторінки не міняється, тому початкове значення атрибута залишається доступним.
У прикладі видно, що зміна якості value не відбивається на значенні атрибута value. Таким чином, порівнявши значення атрибута і властивості, можна зрозуміти, чи був змінений текст в поле.
Для елементів створюються властивості не тільки із зазначених в коді атрибутів, а взагалі з усіх доступних для даного елемента атрибутів, навіть якщо їх немає в коді. Сюди включені глобальні атрибути та атрибути подій. Такі властивості приймають значення за замовчуванням.
При побудові документа однойменні атрибути і властивості не завжди мають однакове значення.
Найпоширеніший приклад - це атрибут href.
Для атрибута булевого типу (hidden. Autofocus. Checked. Disabled. Multiple. Readonly. Required) створюється однойменне властивість також булевого типу, тобто із значенням true або false. Але в HTML-коді ці атрибути взагалі можуть не мати значний.
Якщо в HTML-коді буде вказано нестандартний для конкретного елемента атрибут, то однойменне властивість створено не буде.
І це логічно, якщо атрибут не описаний в стандарті. значить він не може вплинути на параметри елемента.
Проблем з цією особливістю зазвичай не виникає, так як нестандартні атрибути майже не використовуються (з ними сторінка не проходить валідацію).
атрибути data-
Для передачі інформації в HTML введені атрибути з префіксом data-. З такими атрибутами потрібно працювати через властивість dataset. Воно містить список всіх data- атрибутів елемента.
Атрибут class
Дана властивість зручно використовувати, якщо елементу присвоєно тільки один клас. Але якщо їх декілька, то з цією властивістю працювати складніше. Для таких випадків в DOM введено ще одна властивість для роботи з класами - classList.
Властивість classList містить список (псевдомассів) класів елемента. Для роботи з цим масивом можна скористатися циклом або вбудованими методами:
classList.add (клас) Додає клас. classList.remove (клас) Видаляє клас. classList.contains (клас) Перевіряє, чи є клас. classList.toggle (клас) Додає клас, якщо його немає, або видаляє його, якщо він вже є.
Атрибут style
Властивість style містить об'єкт-колекцію всіх CSS-властивостей елемента. При цьому значення мають тільки ті властивості, які задані атрибутом style. Значеннями інших властивостей є порожні рядки.
Використання цієї властивості дуже зручно, так як CSS-властивості елемента, задані з його допомогою, мають майже найвищий пріоритет (як і атрибут style).
Ще однією перевагою є те, що з кожним CSS-властивість можна працювати окремо. Властивість style представляє об'єкт, в якому кожній властивості відповідає певний CSS-стиль.
Крім того, властивості style можна привласнити стилі у вигляді рядка, як це робиться з атрибутом style. Для цього використовується доступне для запису властивість style.cssText. Однак, необхідно пам'ятати, що присвоєння нового значення властивості style.cssText повністю перезаписує значення атрибута style.
Властивість style дуже корисно у випадках, коли потрібно змінити якусь CSS-властивість елемента. Але воно не годиться для отримання значень застосованих стилів. Так виходить, тому що властивість style отримує значення стилів з атрибута style. який використовується рідко (найчастіше CSS-стилі виносяться в окремий файл).
Щоб отримати значення всіх CSS-властивостей, застосованих до елементу, необхідно скористатися методом window.getComputedStyle ().
getComputedStyle ()
Метод getComputedStyle () об'єкта window повертає такий же об'єкт, як і властивість style. Але в ньому містяться значення всіх стилів, які в даний момент застосовані до елементу (з урахуванням зовнішніх файлів стилів і тега