JavaScript. Подробное руководство, 6-е издание

Флэнаган Дэвид

15.2. Выбор элементов документа

Работа большинства клиентских программ на языке JavaScript так или иначе связана с манипулированием элементами документа. В ходе выполнения эти программы могут использовать глобальную переменную

document

, ссылающуюся на объект Document. Однако, чтобы выполнить какие-либо манипуляции с элементами документа, программа должна каким-то образом получить, или выбрать, объекты

Element

, ссылающиеся на эти элементы документа. Модель DOM определяет несколько способов выборки элементов. Выбрать элемент или элементы документа можно:

• по значению атрибута

id

;

• по значению

атрибута

name

;

• по имени тега;

• по имени класса или классов CSS; или

• по совпадению с определенным селектором CSS.

Все эти приемы выборки элементов описываются в следующих подразделах.

15.2.1. Выбор элементов по значению атрибута id

Все HTML-элементы имеют атрибуты

id

. Значение этого атрибута должно быть уникальным в пределах документа - никакие два элемента в одном и том же документе не должны иметь одинаковые значения атрибута

id

. Выбрать элемент по уникальному значению атрибута

id

можно с помощью метода

getElementById

объекта

Document

. Этот метод уже использовался в примерах глав 13 и 14:

var section1 = document.getElementById("section1");

Это самый простой и самый распространенный способ выборки элементов. Если сценарию необходимо иметь возможность манипулировать каким-то определенным множеством элементов документа, присвойте значения атрибутам

id

этих элементов и используйте возможность их поиска по этим значениям. Если потребуется отыскать более одного элемента по значению атрибута

id

, можно воспользоваться удобной функцией

getElements

, реализация которой приводится в примере 15.1.

Пример 15.1. Поиск нескольких элементов по значениям атрибута

id

/**

* Эта функция принимает произвольное количество строковых аргументов.

* Каждый аргумент интерпретируется как значение атрибута id элемента,

* и для каждого из них вызывается метод document.getElementById.

* Возвращает объект, который отображает значения атрибута id

* в соответствующие объекты Element. Если какое-то значение атрибута id

* не будет найдено в документе, возбуждает исключение Error.

*/

function getElements(/* значения атрибутов id...*/) {

var elements = {}; // Создать пустое отображение

for(var і = 0; і < arguments.length; i++) { // Для каждого аргумента

var id = arguments[i]; // Аргумент - id элемента

var elt = document.getElementById(id); // Отыскать элемент

if (elt == null) // Если не найден,

throw new Error("No element with id:" + id); // возбудить ошибку

elements[id] = elt; // Отобразить id в элемент

}

return elements; //

Вернуть отображение id в элементы

}

В версиях Internet Explorer ниже IE8 метод

getElementById

выполняет поиск значений атрибутов

id

без учета регистра символов и, кроме того, возвращает элементы, в которых будет найдено совпадение со значением атрибута

name

.

15.2.2. Выбор элементов по значению атрибута name

HTML-атрибут

name

первоначально предназначался для присваивания имен элементам форм, и значение этого атрибута использовалось, когда выполнялась отправка данных формы на сервер. Подобно атрибуту

id

, атрибут name присваивает имя элементу. Однако, в отличие от

id

, значение атрибута

name

не обязано быть уникальным: одно и то же имя могут иметь сразу несколько элементов, что вполне обычно при использовании в формах радиокнопок и флажков. Кроме того, в отличие от

id

, атрибут

name

допускается указывать лишь в некоторых HTML-элементах, включая формы, элементы форм и элементы

<iframe>

и

<img>

.

Выбрать HTML-элементы, опираясь на значения их атрибутов

name

, можно с помощью метода

getElementsByName

объекта

Document

:

var radiobuttons = document.getElementsByName("favorite_color");

Метод

getElementsByName

определяется не классом

Document

, а классом

HTMLDocument

, поэтому он доступен только в HTML-документах и не доступен в XML-документах. Он возвращает объект

NodeList

, который ведет себя, как доступный только для чтения массив объектов

Element

. В IE метод

getElementsByName

возвращает также элементы, значения атрибутов

id

которых совпадает с указанным значением. Чтобы обеспечить совместимость с разными версиями броузеров, необходимо внимательно подходить к выбору значений атрибутов и не использовать одни и те же строки в качестве значений атрибутов

name

и

id

.

Мы видели в разделе 14.7, что наличие атрибута

name

в некоторых HTML-элементах приводит к автоматическому созданию свойств с этими именами в объекте

Window

. То же относится и к объекту

Document

. Наличие атрибута name в элементе

<form>,

<img>, <if rame>, <applet>, <embed>

или

<object>

(но только в элементе

<object>,

который не имеет вложенных объектов с альтернативным содержимым) приводит к созданию свойства в объекте

Document

, имя которого совпадает со значением атрибута (при этом предполагается, что объект документа еще не имеет свойства с этим именем).