На рис. 15.2 следует также отметить наличие большого количества подтипов класса
<b>HTMLElement</b>
, представляющих конкретные типы HTML-элементов. Каждый из них определяет JavaScript-свойства, отражающие HTML-атрибуты конкретного элемента или группы элементов (раздел 15.4.1). Некоторые из этих специфических классов определяют дополнительные свойства или методы, которые не являются отражением синтаксиса языка разметки HTML. Более подробно эти классы и их дополнительные особенности рассматриваются в справочном разделе книги.
Наконец, обратите внимание, что на рис. 15.2 изображены некоторые типы узлов, которые нигде до сих пор не упоминались. Узлы
<b>Comment</b>
представляют HTML- или XML-комментарии. Поскольку комментарии являются обычными текстовыми строками, эти узлы во многом подобны узлам
<b>Text</b>
, представляющим отображаемый текст документа. Тип
<b>CharacterData</b>
, обобщенный предок типов
<b>Text</b>
и
<b>Comment</b>
, определяет методы, общие для узлов этих двух типов. Узлы типа
<b>Attr</b>
представляют XML- или HTML-атрибуты, но они практически никогда не используются, потому что класс
<b>Element</b>
определяет методы, позволяющие интерпретировать атрибуты, как пары имя/значение, а не как узлы документа. Объект
<b>DocumentFragment</b>
(не изображен на рисунке) - это разновидность узлов, которая практически никогда не встречается в документах: он представляет последовательность узлов, не имеющих общего родителя. Объекты
<b>DocumentFragment</b>
удобно использовать при выполнении манипуляций над документами, и подробнее об этом типе рассказывается в разделе 15.6.4. Модель DOM также определяет несколько редко используемых типов, представляющих, например, объявления типа документа и инструкции обработки XML.
15.2. Выбор элементов документа
Работа большинства клиентских программ на языке JavaScript так или иначе связана с манипулированием элементами документа. В ходе выполнения эти программы могут использовать глобальную переменную
<b>document</b>
, ссылающуюся на объект Document. Однако, чтобы выполнить какие-либо манипуляции с элементами документа, программа должна каким-то образом получить, или выбрать, объекты
<b>Element</b>
, ссылающиеся на эти элементы документа. Модель DOM определяет несколько способов выборки элементов. Выбрать элемент или элементы документа можно:
• по значению атрибута
<b>id</b>
;
• по значению атрибута
<b>name</b>
;
• по имени тега;
• по имени класса или классов CSS; или
• по совпадению с определенным селектором CSS.
Все эти приемы выборки элементов описываются в следующих подразделах.
15.2.1. Выбор элементов по значению атрибута id
Все HTML-элементы имеют атрибуты
<b>id</b>
. Значение этого атрибута должно быть уникальным в пределах документа - никакие два элемента в одном и том же документе не должны иметь одинаковые значения атрибута
<b>id</b>
. Выбрать элемент по уникальному значению атрибута
<b>id</b>
можно с помощью метода
<b>getElementById()</b>
объекта
<b>Document</b>
. Этот метод уже использовался в примерах глав 13 и 14:
<b>var section1 = document.getElementById("section1");</b>
Это самый простой и самый распространенный способ выборки элементов. Если сценарию необходимо иметь возможность манипулировать каким-то определенным множеством элементов документа, присвойте значения атрибутам
<b>id</b>
этих элементов и используйте возможность их поиска по этим значениям. Если потребуется отыскать более одного элемента по значению атрибута
<b>id</b>
, можно воспользоваться удобной функцией
<b>getElements()</b>
, реализация которой приводится в примере 15.1.
Пример 15.1. Поиск нескольких элементов по значениям атрибута
<b>id</b>
<b>/**</b>
<b>* Эта функция принимает произвольное количество строковых аргументов.</b>
<b>* Каждый аргумент интерпретируется как значение атрибута id элемента,</b>
<b>* и для каждого из них вызывается метод document.getElementById().</b>
<b>* Возвращает объект, который отображает значения атрибута id</b>
<b>* в соответствующие объекты Element. Если какое-то значение атрибута id</b>
<b>* не будет найдено в документе, возбуждает исключение Error.</b>
<b>*/</b>
<b>function getElements(/* значения атрибутов id...*/) {</b>
<b> var elements = {}; // Создать пустое отображение</b>
<b> for(var і = 0; і < arguments.length; i++) { // Для каждого аргумента </b>
<b> var id = arguments[i]; // Аргумент - id элемента</b>
<b> var elt = document.getElementById(id); // Отыскать элемент </b>
<b> if (elt == null) // Если не найден,</b>
<b> throw new Error("No element with id:" + id); // возбудить ошибку</b>
<b> elements[id] = elt; // Отобразить id в элемент</b>
<b> }</b>
<b> return elements; // Вернуть отображение id в элементы</b>
<b>}</b>
В версиях Internet Explorer ниже IE8 метод
<b>getElementById()</b>
выполняет поиск значений атрибутов
<b>id</b>
без учета регистра символов и, кроме того, возвращает элементы, в которых будет найдено совпадение со значением атрибута
<b>name</b>
.
15.2.2. Выбор элементов по значению атрибута name
HTML-атрибут
<b>name</b>
первоначально предназначался для присваивания имен элементам форм, и значение этого атрибута использовалось, когда выполнялась отправка данных формы на сервер. Подобно атрибуту
<b>id</b>
, атрибут name присваивает имя элементу. Однако, в отличие от
<b>id</b>
, значение атрибута
<b>name</b>
не обязано быть уникальным: одно и то же имя могут иметь сразу несколько элементов, что вполне обычно при использовании в формах радиокнопок и флажков. Кроме того, в отличие от
<b>id</b>
, атрибут
<b>name</b>
допускается указывать лишь в некоторых HTML-элементах, включая формы, элементы форм и элементы
<b><iframe></b>
и
<b><img></b>
.
