Встреча № 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>
Работа со стилями элемента
Самый простой способ управления стилями CSS – это манипулирование атрибутом style отдельных элементов документа. Атрибуту style соответствует одноименное свойство, и им можно манипулировать в сценариях на языке JS. Однако свойство style имеет одну отличительную особенность: его значением является не строка, а объект CSSStyleDeclaration. Свойства этого объекта представляют CSS-свойства, определенные в HTML-атрибуте style. Например, чтобы вывести содержимое элемента elem крупным, жирным шрифтом синего цвета, можно выполнить операции для записи значений в свойства, которые соответствуют свойствам стиля font-size, font-weight и color:
elem.style.fontSize = "24pt";
elem.style.fontWeight = "bold";
elem.style.color = "blue";
При работе со свойствами стиля не забывайте, что все значения должны задаваться в виде строк. В таблице стилей или атрибуте style можно написать: position: absolute; background-color: #ffffff; Чтобы сделать то же самое для элемента elem в JavaScript, необходимо заключить все значения в кавычки:
e.style.position = "absolute";
e.style.backgroundColor = "#ffffff";
Обратите внимание, что точки с запятыми не входят в строковые значения. Это точки с запятой, употребляемые в синтаксисе языка JS. А также помните, что во всех свойствах позиционирования должны быть указаны единицы измерения. То есть нельзя устанавливать свойство left вот так:
e.style.left = 300; // Неправильно: это число, а не строка
e.style.left = "300"; // Неправильно: отсутствуют единицы измерения
Единицы измерения обязательны при установке свойств стиля в JavaScript – так же, как при установке свойств стиля в таблицах стилей.
e.style.left = "300px";
Сброс стиля в style
Для того, чтобы сбросить стиль, установленный в атрибуте style, присваивают объекту style пустую строку:
elem.style.width="".
При сбросе свойства style стиль будет взят из CSS.
|
|
Например, для того, чтобы спрятать элемент, можно присвоить: elem.style.display = "none". А вот чтобы показать его обратно – не обязательно указывать другой display, наподобие elem.style.display = "block". Можно просто снять поставленный стиль: elem.style.display = "".