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

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

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

NodeList

, играющий роль массива элементов. Как было показано в разделе 14.7, для именованных элементов

<iframe>

создаются особые свойства документа: они ссылаются не на объекты

Element

, а на объекты

Window

, представляющие фреймы.

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

Document

:

//

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

var form = document.shipping_address;

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

getElementsByName

.

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

Метод

getElementsByTagName

объекта

Document

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

Element

всех элементов

<span>

в документе, можно следующим образом:

var spans = document.getElementsByTagName("span");

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

getElementsByName

,

getElementsByTagName

возвращает объект

NodeList

. (Подробнее класс

NodeList

описывается во врезке, в этом же разделе.) Элементы документа включаются в массив

NodeList

в том же порядке, в каком они следуют в документе, т. е. первый элемент

<р>

в документе можно выбрать так:

var firstpara = document.getElementsByTagName("p")[0];

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

getElementsByTagName

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

spans

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

<span>

, которые записаны как

<SPAN>.

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

NodeList

, содержащий все элементы документа, если передать методу

getElementsByTagName

шаблонный символ «*».

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

Element

также определяет метод

getElementsByTagName.

Он действует точно так же, как и версия метода в классе

Document

, но выбирает только элементы, являющиеся потомками для элемента, относительно которого вызывается метод. То есть отыскать все элементы

<span>

внутри первого элемента

<р>

можно следующим образом:

var firstpara = document.getElementsByTagName("p")[0];

var firstParaSpans = firstpara.getElementsByTagName("span");

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

HTMLDocument

определяет специальные свойства для доступа к узлам определенных типов. Свойства

images

,

forms

и

links

, например, ссылаются

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

<img>, <form>

и

<а>

(но только те теги

<а>,

которые имеют атрибут

href

). Эти свойства ссылаются на объекты

HTMLCollection

, которые во многом похожи на объекты

NodeList

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

id

и

name

. Ранее мы узнали, как можно получить ссылку на именованный элемент

<form>

с помощью такого выражения:

document.shipping_address

С помощью свойства

document.forms

обращение к форме, имеющей атрибут

name

(или

id

), можно записать более явно:

document.fоrms.shipping_address;

Объект

HTMLDocument

также определяет свойства-синонимы

embeds

и

plugins

, являющиеся коллекциями

HTMLCollection

элементов

<embed>.

Свойство

anchors

является нестандартным, но с его помощью можно получить доступ к элементам

<а>,

имеющим атрибут

name

, но не имеющим атрибут

href

. Свойство

scripts

определено стандартом HTML5 и является коллекцией

HTMLCollection

элементов

<script>,

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

Кроме того, объект

HTMLDocument

определяет два свойства, каждое из которых ссылается не на коллекцию, а на единственный элемент. Свойство

document.body

представляет элемент

<body>

HTML-документа, а свойство

document.head

– элемент

<head>.

Эти свойства всегда определены в документе: даже если в исходном документе отсутствуют элементы

<head>

и

<body>,

броузер создаст их неявно. Свойство

document.Element

объекта

Document

ссылается на корневой элемент документа. В HTML-документах он всегда представляет элемент

<html>

.

Объекты NodeList и HTMLCollection

Методы

getElementsByName

и

getElementsByTagName

возвращают объекты

NodeList

, а такие свойства, как

document.images

и

document.forms

, являются объектами

HTMLCollection

.

Эти объекты являются объектами, подобными массивам, доступным только для чтения (раздел 7.11). Они имеют свойство

length

и могут индексироваться (только для чтения) подобно настоящим массивам. Содержимое объекта

NodeList

или

HTMLCollection

можно обойти с помощью стандартного цикла, например: