DOM
Манипулирование атрибутами
Поиск…
замечания
Атрибуты - это особый тип объекта в DOM API. В более ранних версиях DOM API они унаследованы от типа Node , но это было изменено в версии 4.
В примерах, относящихся к dataset , «современные браузеры» специально исключают версии Internet Explorer меньше 11. См. Caniuse.com для получения более актуальной информации.
Получение атрибута
Некоторые атрибуты напрямую доступны как свойства элемента (например, alt , href , id , title и value ).
var a = document.querySelector("a"),
url = a.href;
Доступ к другим атрибутам, включая атрибуты данных, можно получить следующим образом:
var a = document.querySelector("a"),
tooltip = a.getAttribute("aria-label");
Атрибуты данных также можно получить с помощью dataset (современных браузеров)
// <a href="#" data-tracking-number="ABC-123">Widget</a>
var a = document.querySelector("a"),
tracker = a.dataset.trackingNumber;
Установка атрибута
Некоторые атрибуты напрямую доступны как свойства элемента (например, alt, href, id, title и value).
document.querySelector("a").href = "#top";
Другие атрибуты, включая атрибуты данных, могут быть установлены следующим образом:
document.querySelector("a").setAttribute("aria-label", "I like turtles");
Атрибуты данных также могут быть установлены с использованием набора данных (современных браузеров)
var a = document.querySelector("a");
a.dataset.test = "123";
a.dataset['test-2'] = "456";
приводит к
<a href="#" data-test="123" data-test-2="456">Widget</a>
Удаление атрибута
Чтобы удалить атрибут, включая непосредственно доступные свойства
document.querySelector("a").removeAttribute("title");
Атрибуты данных также можно удалить следующим образом (современные браузеры):
// remove "data-foo" attribute
delete document.querySelector("a").dataset.foo;