На цьому уроці ми познайомимося з властивостями і методами елементів (вузлів), які призначені для роботи з їх атрибутами. За допомогою цих властивостей і методів Ви можете не тільки отримувати значення атрибутів, а й змінювати їх, додавати нові атрибути або видаляти існуючі.
властивість attributes
У будь-якого елементу (вузла) є властивість attributes. за допомогою якого Ви можете отримати колекцію його атрибутів (вузлів), у вигляді об'єкта NamedNodeMap. Кожен атрибут (вузол) в цій колекції має ім'я, який збігається з ім'ям атрибута. Доступ до атрибуту (вузлу) в цій колекції здійснюється по його індексу або за допомогою методу item (). Відлік атрибутів (вузлів) в цій колекції починається з 0.
Для роботи з вузлами (отримання значення вузла, додавання нового вузла або видалення існуючого) використовуються наступні методи об'єкта NamedNodeMap. getNamedItem (). setNamedItem () і removeNamedItem ().
Як приклад, розглянемо елемент р і його атрибути:
Для того, щоб можна було перебрати всі атрибути в колекції нам необхідно знати їх кількість. Отримати кількість атрибутів в колекції можна за допомогою властивості length об'єкта NameNodeMap.
Наприклад, переберемо всі атрибути в колекції:
У будь-якого атрибута є властивості name і value. за допомогою яких Ви можете отримати ім'я атрибута і його значення.
Наприклад, знайдемо у елемента р атрибут class. і змінимо його значення на "info".
Метод getNamedItem ()
Даний метод повертає значення атрибута (вузла), що має вказане ім'я. Якщо даний атрибут (вузол) не знайдено, то даний метод повертає значення null.
Метод getNamedItem () має один обов'язковий параметр - це рядок, що містить ім'я атрибута.
Метод setNamedItem ()
Даний метод додає атрибут (вузол) до елементу (до NameNodeMap). Якщо атрибут (вузол) з такою назвою вже є у елемента, то він буде замінений вузлом, який ми додаємо до елементу (до NameNodeMap). Метод setNamedItem () повертає як значення null. якщо при додаванні атрибуту (вузла), у нього не було атрибута (вузла) з такою назвою або сам атрибут (вузол), якщо ми його замінили новим атрибутом (вузлом).
Метод setNamedItem () має один обов'язковий параметр - це атрибут (вузол), який необхідно додати до елементу (до NameNodeMap).
Для створення атрибута (вузла) необхідно скористатися методом document.createAttribute (). якому в якості параметра необхідно передати ім'я атрибута (вузла). Далі даному атрибуту (вузлу) необхідно присвоїти значення за допомогою властивості value. Після цього даний атрибут вже можна додати до елементу (до NameNodeMap), за допомогою передачі його в якості параметра методу setNamedItem ().
Метод removeNamedItem ()
Даний метод видаляє атрибут (вузол) з вказаним ім'ям в об'єкті NameNodeMap. Метод removeNamedItem () повертає як значення атрибут (вузол) елемента, який ми видалили.
Метод removeNamedItem () має один обов'язковий параметр - це атрибут (вузол), який необхідно видалити у елемента (з колекції NameNodeMap).
- Отримати елемент по id = "description".
- Отримати об'єкт NameNodeMap. що містить всі атрибути елемента, отриманого на попередньому кроці.
- Використовуючи метод getNamedItem (). вивести в консоль значення атрибута id.
- Додати до елементу атрибут style = "".
- Видалити атрибут клас у елемента.
Методи елемента (вузла) для роботи з його атрибутами
Крім властивості attributes. яке повертає атрибути у вигляді NameNodeMap. у кожного елемента (вузла) є методи (getAttribute (). setAttribute (). removeAttribute (). hasAttribute ()), які дозволяють працювати з його атрибутами більш просто.
Метод getAttribute ()
Метод getAttribute () повертає значення атрибута, зазначеного в якості параметра. Якщо даного атрибута у елемента немає, то даний метод повертає порожній рядок ( "") або null.
Наприклад, отримати значення атрибуту rel у елемента a. має id = "myAnchor":
Метод setAttribute ()
Метод setAttribute () додає вказаний атрибут до елементу і привласнює йому вказане значення. Якщо вказаний атрибут у елемента вже є, то даний метод змінює тільки його значення.
Наприклад, змінити значення атрибута target на "_self" тільки тих елементів a в документі, які мають даний атрибут:
Метод removeAttribute ()
Метод removeAttribute () видаляє вказаний атрибут у елемента. Даний метод має один обов'язковий параметр - це рядок, що містить ім'я атрибута, який Ви хочете видалити у елемента. Даний метод в якості результату нічого не повертає.
Наприклад, видалити атрибут href у всіх елементів a в документі:
Метод hasAtrribute ()
Метод hasAtrribute () повертає true. якщо вказаний атрибут існує у елемента. В іншому випадку даний метод повертає false. Даний метод має один обов'язковий параметр - це рядок, що містить ім'я атрибута, який Ви хочете перевірити на існування у елемента.
Наприклад, видалити атрибут style тільки у тих елементів на сторінці, які мають даний атрибут:
Метод hasAttributes ()
Метод hasAttributes () повертає true якщо вказаний вузол має атрибути. В іншому випадку даний метод повертає false. Якщо вказаний вузол не є елементом, то даний метод завжди повертає значення false. Метод hasAttributes не має параметрів.
Наприклад, визначити чи має елемент з id = "main" атрибути: