Встреча № 8
Атрибуты и DOM-свойства
При чтении HTML браузер генерирует DOM-модель. При этом большинство стандартных HTML-атрибутов становятся свойствами соответствующих объектов.
Например, если тег выглядит как <body id="page">, то у объекта будет свойство body.id = "page".
Но это преобразование – не один-в-один. Бывают ситуации, когда атрибут имеет одно значение, а свойство – другое. Бывает и так, что атрибут есть, а свойства с таким названием не создаётся.
Атрибуты HTML
HTML-элементы состоят из имени тега и множества пар имя/значение, известных как атрибуты. Например, элемент <a> </a>, в качестве адреса назначения ссылки использует значение атрибута href.
Значения атрибутов HTML-элементов доступны в виде свойств объектов HTMLElement, представляющих эти элементы. Кроме того, модель DOM определяет механизмы получения и изменения значений нестандартных HTML-атрибутов.
HTML-атрибуты как свойства объектов Element
Объект HTMLElement определяет свойства для поддержки универсальных HTTP-атрибутов, таких как id, title, lang и dir, и даже обработчики событий, такие как onclick.
Например, узнать URL-адрес изображения можно, обратившись к свойству src объекта HTMLElement, представляющего элемент
var image = document.getElementById("myimage");
var imgurl = image.src; // Атрибут src определяет URL-адрес изображения
Имена атрибутов в разметке HTML не чувствительны к регистру, в отличие от языкF JavaScript. Чтобы преобразовать имя атрибута в имя свойства в JavaScript, его нужно записать символами в нижнем регистре. Однако, если имя атрибута состоит из более чем одного слова, первый символ каждого слова, кроме первого, записывается в верхнем регистре, например: defaultChecked и tabIndex.
Имена некоторых HTML-атрибутов совпадают с зарезервированными словами языка JavaScript. Имена свойств, соответствующих таким атрибутам, начинаются с приставки «html». Например, HTML-атрибуту for в языке JavaScript соответствует свойство с именем htmlFor. Очень важный HTML-атрибут class, имя которого совпадает с зарезервированным в языке JavaScript, является исключением из этого правила: в программном коде на языке JavaScript ему соответствует свойство className.
Обратите внимание, что основанный на свойствах прикладной интерфейс получения доступа к значениям атрибутов не позволяет удалять атрибуты из элементов.
Еще один способ работы с атрибутами
Доступ к атрибутам осуществляется при помощи стандартных методов:
· elem.hasAttribute(name) – проверяет наличие атрибута
· elem.getAttribute(name) – получает значение атрибута
· elem.setAttribute(name, value) – устанавливает атрибут
· elem.removeAttribute(name) – удаляет атрибут
Эти методы работают со значением, которое находится в HTML.
Нестандартные атрибуты
У каждого элемента есть некоторый набор стандартных свойств, например для <a> это будут href, name, а для <img> это будут src, alt. Точный набор свойств описан в стандарте.
С помощью нестандартных атрибутов можно привязать к элементу данные, которые будут доступны в JavaScript. Как правило, это делается при помощи атрибутов начинающимися на data-, например:
<div id="elem" data-about="Elephant" data-user-location="street"> По улице прошёлся слон. Весьма красив и толст был он. </div>
<script>
alert(elem.getAttribute('data-about')); // Elephant
alert(elem.getAttribute('data-user-location')); // street
</script>
Стандарт HTML5 специально разрешает атрибуты data-* и резервирует их для пользовательских данных. При этом во всех браузерах, кроме IE10-, к таким атрибутам можно обратиться не только как к атрибутам, но и как к свойствам, при помощи специального свойства dataset:
<div id="elem" data-about="Elephant" data-user-location="street"> По улице прошёлся слон. Весьма красив и толст был он. </div>
<script>
alert(elem.dataset.about); // Elephant
alert(elem.dataset.userLocation); // street
</script>
Обратим внимание – название data-user-location трансформировалось в dataset.userLocation. Дефис превращается в большую букву.
Классы в виде объекта: classList
Атрибут class – уникален. Ему соответствует целых два свойства!
Работать с классами как со строкой неудобно. Поэтому, кроме className, в современных браузерах есть свойство classList.
Свойство classList – это объект для работы с классами.
Методы classList:
· elem.classList.contains("action") – возвращает true/false, в зависимости от того, есть ли у элемента класс action.
· elem.classList.add/remove("action ") – добавляет/удаляет класс action
· elem.classList.toggle("action ") – если класса action нет, добавляет его, если есть – удаляет.
Можно перебрать классы через for, так как classList – это псевдо-массив, например:
<body class="main page">
<script>
var classList = document.body.classList;
classList.remove('page'); // удалить класс
classList.add('post'); // добавить класс
for (var i = 0; i < classList.length; i++) { // перечислить классы
alert(classList[i]); // main, затем post
}
alert(document.body.className); // main post
</script>
</body>