Однако возможность расширения типов DOM может пригодиться для реализации особенностей, характерных для IE, в других броузерах. Как отмечалось выше, нестандартное свойство
children
объекта
Element
было впервые реализовано в IE и только потом - в других броузерах. Используя следующий программный код, можно реализовать это свойство в броузерах, не поддерживающих его, таких как Firefox 3.0:
// Реализация свойства Element.children в броузерах,
// не поддерживающих его
// Обратите внимание, что этот метод возвращает статический
//
массив, а не "живой" NodeList
if (!document.documentElement.children) {
Element.prototype.__defineGetter__("children",
function { var kids = [];
for(var c = this.firstChild; c != null; c = c.nextSibling)
if (c.nodeType === 1) kids.push(c);
return kids;
}):
}
Метод
__defineGetter__
(о нем рассказывается в разделе 6.7.1) не является
стандартным, но его вполне можно использовать для обеспечения переносимости в таком программном коде, как этот.
15.4. Атрибуты
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-элементов нечувствительны к регистру символов.