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

• по значению атрибута 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, имя которого совпадает со значением атрибута (при этом предполагается, что объект документа еще не имеет свойства с этим именем).

Если существует только один элемент с указанным именем, значением автоматически созданного свойства документа станет сам элемент. Если таких элементов несколько, значением свойства будет объектNodeList, играющий роль массива элементов. Как было показано в разделе 14.7, для именованных элементов <iframe> создаются особые свойства документа: они ссылаются не на объекты Element, а на объекты Window, представляющие фреймы.

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

  // Получить ссылку на объект Element для элемента <form name="shipping_address">
  var form = document.shipping_address;

Причины, почему не следует использовать автоматически создаваемые свойства окна, которые описываются в разделе 14.7, в равной степени применимы и к автоматически создаваемым свойствам документа. Если вам потребуется отыскать именованные элементы, лучше всего это сделать явно, с помощью метода getElementsByName.