HTML-элементы состоят из имени тега и множества пар имя/значение, известных как атрибуты. Например, элемент
<а>
, определяющий гиперссылку, в качестве адреса назначения ссылки использует значение атрибута
href
. Значения атрибутов HTML-элементов доступны в виде свойств объектов
HTMLElement
, представляющих эти элементы. Кроме того, модель DOM определяет и другие механизмы получения и изменения значений XML-атрибутов и нестандартных HTML-атрибутов. Подробнее об этом рассказывается в следующих подразделах.
15.4.1. HTML-атрибуты как свойства объектов Element
Объекты
HTMLElement
, представляющие элементы HTML-документа, определяют свойства, доступные для чтения/записи, соответствующие HTML-атрибутам элементов. Объект
HTMLElement
определяет свойства для поддержки универсальных HTTP-атрибутов, таких как
id
,
title
,
lang
и
dir
, и даже свойства-обработчики событий, такие как
onclick
. Специализированные подклассы класса
Element
определяют атрибуты, характерные для представляемых ими элементов. Например, узнать URL-адрес изображения можно, обратившись к свойству
src
объекта
HTMLElement
, представляющего элемент
<img>
:
var image = document.getElementById("myimage");
var imgurl = image.src; // Атрибут src определяет URL-адрес изображения
image.id === "myimage" // Потому что поиск элемента выполнялся по id
Аналогично можно устанавливать атрибуты элемента <form>, определяющие порядок отправки формы:
var f = document.forms[0]; // Первый элемент <form> в документе
f.action = "http://www.example.com/submit.php"; // Установить URL отправки,
f.method = "POST"; // Тип HTTP-запроса
Имена атрибутов в разметке HTML не чувствительны к регистру символов, в отличие от имен свойств в языке JavaScript. Чтобы преобразовать имя атрибута в имя свойства в языке JavaScript, его нужно записать символами в нижнем регистре. Однако, если имя атрибута состоит из более чем одного слова, первый символ каждого слова, кроме первого, записывается в верхнем регистре, например:
defaultChecked
и
tabIndex
.
Имена некоторых HTML-атрибутов совпадают с зарезервированными словами языка JavaScript. Имена свойств, соответствующих таким атрибутам, начинаются с приставки "html". Например, HTML-атрибуту
for
(элемента
<label>
) в языке JavaScript соответствует свойство с именем
htmlFor
. Очень важный HTML-атрибут
class
, имя которого совпадает с зарезервированным (но не используемым) в языке JavaScript словом «class», является исключением из этого правила: в программном коде на языке JavaScript ему соответствует свойство
className
. Мы еще встретимся со свойством
className
в главе 16.
Свойства, представляющие HTML-атрибуты, обычно имеют строковые значения. Если атрибут имеет логическое или числовое значение (например, атрибуты
defaultChecked
и
maxLength
элемента
<input>
), значением соответствующего свойства будет логическое или числовое значение, а не строка. Значениями атрибутов обработчиков событий всегда являются объекты
Function
(или
null
). Спецификация HTML5 определяет несколько атрибутов (таких как атрибут
form
элемента
<input>
и родственных ему элементов), которые преобразуются в фактические объекты
Element
. Наконец, значением свойства
style
любого HTML-элемента является объект
CSSStyleDeclaration
, а не строка. Поближе с этим важным свойством мы познакомимся в главе 16.
Обратите внимание, что основанный на свойствах прикладной интерфейс получения доступа к значениям атрибутов не позволяет удалять атрибуты из элементов. В частности, для этих целей нельзя использовать оператор
delete
. Для этой цели можно использовать прием, который описывается в следующем разделе.
15.4.2. Доступ к нестандартным HTML-атрибутам
Как описывалось выше, тип
HTMLElement
и его подтипы определяют свойства, соответствующие стандартным атрибутам HTML-элементов. Однако тип
Element
определяет дополнительные методы
getAttribute
и
setAttribute
, которые можно использовать для доступа к нестандартным HTML-атрибутам, а также обращаться к атрибутам элементов XML-документа:
var image = document.images[0];
var width = parseInt(image.getAttribute("WIDTH"));
image.setAttribute("class", "thumbnail");
Пример выше демонстрирует два важных отличия между этими методами и прикладным интерфейсом, основанным на свойствах и описанным выше. Во-первых, значения всех атрибутов они интерпретируют как строки. Метод
getAttribute
никогда не вернет число, логическое значение или объект. Во-вторых, эти методы принимают стандартные имена атрибутов, даже если они совпадают с зарезервированными словами языка JavaScript. Имена атрибутов HTML-элементов нечувствительны к регистру символов.
Класс
Element
также определяет два родственных метода,
hasAttribute
и
removeAttribute.
Первый из них проверяет присутствие атрибута с указанным именем, а второй удаляет атрибут. Эти методы особенно удобны при работе с логическими атрибутами: для этих атрибутов (таких как атрибут
disabled
HTML-форм) важно их наличие или отсутствие в элементе, а не их значения.
Если вам приходится работать с XML-документами, содержащими атрибуты из других пространств имен, вы можете использовать варианты этих четырех методов, позволяющие указывать имя пространства имен:
getAttributeNS, setAttributeNS, hasAttributeNS
и
removeAttributeNS.
Вместо единственного строкового аргумента с именем атрибута эти методы принимают два аргумента. В первом передается URI-идентификатор, определяющий пространство имен. Во втором аргументе обычно передается неквалифицированное локальное имя атрибута из этого пространства имен. Исключением является метод
setAttributeNS,
которому во втором атрибуте необходимо передавать квалифицированное имя атрибута, включающее идентификатор пространства имен. Более полная информация об этих методах доступа к атрибутам из других пространств имен приводится в четвертой части книги.
15.4.3. Атрибуты с данными
Иногда бывает желательно добавить в HTML-элементы дополнительные данные, обычно когда предусматривается возможность выбора этих элементов в Java-Script-сценариях и выполнения некоторых операций с ними. Иногда это можно реализовать, добавив специальные идентификаторы в атрибут
class
. Иногда, когда речь заходит о более сложных данных, программисты прибегают к использованию нестандартных атрибутов. Как отмечалось выше, для чтения и изменения значений нестандартных атрибутов можно использовать методы
getAttribute
и
setAttribute.
Платой за это будет несоответствие документа стандарту.