Атрибуты элементов HTML
Атрибут элемента HTML — это сущность, которая используется для определения характеристик html-элемента.
Атрибут элемента помещается внутри открытого тега элемента и состоит из двух частей:
- имя атрибута — это свойство элемента, которое вы хотите определить или изменить;
- значение — это значение, которое вы хотите установить для указанного выше свойства (значение атрибута всегда помещается в кавычки).
Например:
1 |
<p align="right">Lorem ipsum dolor sit amet.</p> // выравнивание абзаца по правому краю (align - имя атрибута, "right" - значение) |
Имена и значения атрибутов в HTML не зависят от регистра, однако консорциум World Wide Web (W3C) рекомендует использовать атрибуты и значения атрибутов в нижнем регистре.
Атрибуты могут быть стандартными и нестандартными, причем стандартный атрибут для одного тега может быть нестандартным для другого. Например, атрибут "type" является стандартным для элемента <input> (HTMLInputElement), но не является стандартным для <body> (HTMLBodyElement).
Стандартные атрибуты описаны в спецификации для соответствующего класса элемента.
Когда браузер парсит HTML, чтобы создать DOM-объекты для тегов, он распознаёт стандартные атрибуты элементов документа и создаёт свойства объектов DOM для них.
Атрибуты элемента (в отличие от свойств элемента как объекта DOM):
- всегда являются строками (значение, присвоенное атрибуту, станет строкой);
- их имя нечувствительно к регистру (это HTML);
- видны в innerHTML.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<h2 id="myMeta" lang="ru" myAttr="myAttr">Заголовок H2</h2> <script> let myAttr = document.getElementById("myMeta"); console.log(myAttr); // <h2 id="myMeta" lang="ru" myattr="myAttr">Заголовок H2</h2> myAttr.hasAttribute("LANG"); // true (нечувствителен к регистру) myAttr.hasAttribute("myAttr"); // true myAttr.getAttribute("myAttr"); // 'myAttr' (получаем значение нестандартного атрибута) myAttr.setAttribute("myAttr", "newMyAttr"); // (изменим значение атрибута myAttr) myAttr.getAttribute("myAttr"); // 'newMyAttr' myAttr.removeAttribute("myAttr"); console.log(myAttr); // <h2 id="myMeta" lang="ru">Заголовок H2</h2> </script> |
Свойства элемента DOM
Основой HTML-документа являются теги, которые в соответствии с объектной моделью документа DOM являются объектами и, соответственно, доступны при помощи JavaScript и могут использоваться для изменения страницы.
У каждого элемента есть некоторый набор стандартных атрибутов (свойств), описанных в стандарте HTML именно для этого элемента (тега), например для <a> это будут href, name, а для <img> это будут src, alt, и т.д. Итак:
- атрибут элемента – это код (строки) HTML;
- свойство элемента – это поле DOM-объекта.
Для нестандартных атрибутов DOM свойство узла как объекта DOM не создаётся.
Например:
1 2 3 4 5 6 7 8 9 |
<p align="right" nonStandart="LOST">Lorem ipsum dolor sit amet.</p> <script> let result; result = document.querySelector("p").align // right (стандартное свойство) result = document.querySelector("p").nonStandart // undefined (нестандартное свойство) </script> |
DOM-узлы – это обычные объекты JavaScript, которые можно изменять:
- создавать новые свойства или методы;
- изменять встроенные прототипы (например, Element.prototype, добавляя новые свойства и методы ко всем элементам).
Пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<p align="right" nonStandart="LOST">Lorem ipsum dolor sit amet.</p> <script> let result; // добавляем свойство newProp в элемент <p> document.querySelector("p").newProp = "New property" result = document.querySelector("p").newProp // New property // изменяем прототип, добавляя свойство sayHello во все элементы Element.prototype.sayHello = "Hello!" result = document.body.sayHello // Hello! result = document.querySelector("p").sayHello // Hello! </script> |
Методы работы с атрибутами элементов документа
Доступ к атрибутам осуществляется:
- при помощи методов, работающих со значением, которое находится в HTML:
- elem.hasAttribute(nameAttr) – проверяет наличие атрибута;
- elem.getAttribute(nameAttr) – получает значение атрибута;
- elem.setAttribute(nameAttr, value) – устанавливает атрибут;
- elem.removeAttribute(nameAttr) – удаляет атрибут;
- свойства elem.attributes, которое содержит перебираемую коллекцию NamedNodeMap{} атрибутов элемента (стандартных и нестандартных) в виде объектов со свойствами name и value.
Когда стандартный атрибут элемента изменяется, соответствующее свойство автоматически обновляется, и наоборот.
DOM-свойства не всегда являются строками. Например:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<input id="input" type="checkbox" checked> checkbox <div id="div" style="color:red;font-size:16px">Hello</div> <script> console.log(input.getAttribute('checked')); // значение атрибута: "" (пустая строка) console.log(input.checked); // значение свойства: true // атрибут style – строка, но свойство style является объектом: console.log(div.getAttribute('style')); // строка "color:red;font-size:16px" console.log(div.style); // объект CSSStyleDeclaration {0: 'color', 1: 'font-size', …} console.log(div.style.color); // red </script> |
Нестандартные атрибуты, dataset
Примеры с https://learn.javascript.ru
Нестандартные атрибуты элементов могут использоваться:
- для передачи пользовательских данных из HTML в JavaScript;
- для обозначения (маркирования) HTML-элементов для JavaScript.
Использование атрибутов в некоторых случаях может быть предпочтительнее использования классов, т.к. атрибутом удобнее управлять: его состояние может быть изменено методом elem.setAttribute(nameAttr, value).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!-- маркирование div нестандартным атрибутом show-info для вывода значения поля "name" --> <div show-info="name"></div> <!-- маркирование div нестандартным атрибутом show-info для вывода значения поля "age" --> <div show-info="age"></div> <script> let user = { name: "Pete", age: 25 }; // цикл находит элемент с нестандартным атрибутом show-info и показывает запрошенную информацию for (let div of document.querySelectorAll('[show-info]')) { // NodeList(2) [div, div] // вставить соответствующую информацию в поле let field = div.getAttribute('show-info'); div.textContent = user[field]; // сначала Pete - в name, потом 25 - в age } // или используя forEach() Array.from(document.querySelectorAll('[show-info]')).forEach(element => { let field = element.getAttribute('show-info'); element.textContent = user[field]; }) </script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/* стили зависят от пользовательского (нестандартного) атрибута "order-state" */ <style> .order[order-state="new"] { color: green; } .order[order-state="pending"] { color: blue; } .order[order-state="canceled"] { color: red; } </style> <div class="order" order-state="new"> A new order. </div> <div class="order" order-state="pending"> A pending order. </div> <div class="order" order-state="canceled"> A canceled order. </div> |
Чтобы избежать конфликтов нестандартных (пользовательских) атрибутов со стандартом языка, используют атрибуты вида data-*, которые зарезервированы для использования программистами и доступны в свойстве dataset.
Например, если у elem есть атрибут "data-about", то обратиться к нему можно как elem.dataset.about.
Атрибуты, состоящие из нескольких слов, например data-order-state, становятся свойствами, записанными с помощью "верблюжьей" нотации: dataset.orderState.
1 2 3 4 5 6 7 8 9 10 11 12 |
<div data-info="name" data-my-age="age">Pete, 25</div> <script> let result; result = document.querySelector("div").getAttribute("data-info"); // name result = document.querySelector("div").getAttribute("data-my-age"); // age result = document.querySelector("div").dataset; // DOMStringMap {info: 'name', myAge: 'age'} result = document.querySelector("div").dataset.info; // name console.log(result); </script> |
ВАЖНО! В большинстве ситуаций предпочтительнее использовать DOM-свойства, а атрибуты только тогда, когда нужны именно атрибуты, например:
- нужен нестандартный атрибут (но если он начинается с data-, тогда нужно использовать dataset);
- необходимо получить оригинальное значение, которое написано в HTML (например, свойство href – всегда полный URL, а значение атрибута может отличаться).
1 2 3 4 5 6 7 8 9 10 |
<a data-info="name" data-my-age="age" href="/site.com">Pete, 25</a> <script> let result; result = document.querySelector("a").getAttribute("href"); // /site.com (оригинальное значение HTML) result = document.querySelector("a").href; // http://localhost:5503/site.com (для примера) console.log(result); </script> |