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>
.