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

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

<b>name</b>
, можно с помощью метода
<b>getElementsByName()</b>
объекта
<b>Document</b>
:

<b>var radiobuttons = document.getElementsByName(&quot;favorite_color&quot;);</b>

Метод

<b>getElementsByName()</b>
определяется не классом
<b>Document</b>
, а классом
<b>HTMLDocument</b>
, поэтому он доступен только в HTML-документах и не доступен в XML-документах. Он возвращает объект
<b>NodeList</b>
, который ведет себя, как доступный только для чтения массив объектов
<b>Element</b>
. В IE метод
<b>getElementsByName()</b>
возвращает также элементы, значения атрибутов
<b>id</b>
которых совпадает с указанным значением. Чтобы обеспечить совместимость с разными версиями броузеров, необходимо внимательно подходить к выбору значений атрибутов и не использовать одни и те же строки в качестве значений атрибутов
<b>name</b>
и
<b>id</b>
.

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

<b>name</b>
в некоторых HTML-элементах приводит к автоматическому созданию свойств с этими именами в объекте
<b>Window</b>
. То же относится и к объекту
<b>Document</b>
. Наличие атрибута name в элементе
&lt;form&gt;,
<b>&lt;img&gt;, &lt;if rame&gt;, &lt;applet&gt;, &lt;embed&gt;</b>
или
<b>&lt;object&gt;</b>
(но только в элементе
<b>&lt;object&gt;,</b>
который не имеет вложенных объектов с альтернативным содержимым) приводит к созданию свойства в объекте
<b>Document</b>
, имя которого совпадает со значением атрибута (при этом предполагается, что объект документа еще не имеет свойства с этим именем).

Если существует только один элемент с указанным именем, значением автоматически созданного свойства документа станет сам элемент. Если таких элементов несколько, значением свойства будет объект

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

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

<b>Document</b>
:

<b>// Получить ссылку на объект Element для элемента &lt;form name=&quot;shipping_address&quot;&gt; </b>

<b>var form = document.shipping_address;</b>

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

<b>getElementsByName()</b>
.

15.2.3. Выбор элементов по типу

Метод

<b>getElementsByTagName()</b>
объекта
<b>Document</b>
позволяет выбрать все HTML- или XML-элементы указанного типа (или по имени тега). Например, получить подобный массиву объект, доступный только для чтения, содержащий объекты
<b>Element</b>
всех элементов
<b>&lt;span&gt;</b>
в документе, можно следующим образом:

<b>var spans = document.getElementsByTagName(&quot;span&quot;);</b>

Подобно методу

<b>getElementsByName()</b>
,
<b>getElementsByTagName()</b>
возвращает объект
<b>NodeList</b>
. (Подробнее класс
<b>NodeList</b>
описывается во врезке, в этом же разделе.) Элементы документа включаются в массив
<b>NodeList </b>
в том же порядке, в каком они следуют в документе, т. е. первый элемент
<b>&lt;р&gt;</b>
в документе можно выбрать так:

<b>var firstpara = document.getElementsByTagName(&quot;p&quot;)[0];</b>

Имена HTML-тегов не чувствительны к регистру символов, и когда

<b>getElementsByTagName()</b>
применяется к HTML-документу, он выполняет сравнение с именем тега без учета регистра символов. Переменная
<b>spans</b>
, созданная выше, например, будет включать также все элементы
<b>&lt;span&gt;</b>
, которые записаны как
<b>&lt;SPAN&gt;.</b>

Можно получить

<b>NodeList</b>
, содержащий все элементы документа, если передать методу
<b>getElementsByTagName()</b>
шаблонный символ «*».

Кроме того, классом

<b>Element</b>
также определяет метод
<b>getElementsByTagName().</b>
Он действует точно так же, как и версия метода в классе
<b>Document</b>
, но выбирает только элементы, являющиеся потомками для элемента, относительно которого вызывается метод. То есть отыскать все элементы
<b>&lt;span&gt;</b>
внутри первого элемента
<b>&lt;р&gt;</b>
можно следующим образом:

<b>var firstpara = document.getElementsByTagName(&quot;p&quot;)[0]; </b>

<b>var firstParaSpans = firstpara.getElementsByTagName(&quot;span&quot;);</b>

По историческим причинам класс

<b>HTMLDocument</b>
определяет специальные свойства для доступа к узлам определенных типов. Свойства
<b>images</b>
,
<b>forms</b>
и
<b>links</b>
, например, ссылаются на объекты, которые ведут себя как массивы, доступные только для чтения, содержащие элементы
<b>&lt;img&gt;, &lt;form&gt;</b>
и
<b>&lt;а&gt;</b>
(но только те теги
<b>&lt;а&gt;,</b>
которые имеют атрибут
<b>href</b>
). Эти свойства ссылаются на объекты
<b>HTMLCollection</b>
, которые во многом похожи на объекты
<b>NodeList</b>
, но дополнительно могут индексироваться значениями атрибутов
<b>id</b>
и
<b>name</b>
. Ранее мы узнали, как можно получить ссылку на именованный элемент
<b>&lt;form&gt;</b>
с помощью такого выражения: