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

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

на обложку

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

Шрифт:

15.2.6. document.all[]

До того, как модель DOM была стандартизована, в IE4 была реализована коллекция

document.all[]

, представляющая все элементы (кроме текстовых узлов

Text

) в документе. Впоследствии коллекцию

document.all[]

заменили стандартные методы, такие как

getElementByld

getElementsByTagName,

и теперь она считается устаревшей и не должна использоваться. Однако в свое время появление этой коллекции произвело целую революцию, и даже сейчас все еще можно встретить

сценарии, использующие ее следующими способами:

document.all[0] // Первый элемент документа

document.all["navbar"] // Элемент (или элементы) со значением "navbar”

// в атрибуте id или name

document.all.navbar // То же самое

document.all.tags("div") // Все элементы <div> в документе

document.all.tags("p”)[0] // Первый элемент <р> в документе

15.3. Структура документа и навигация по документу

После выбора элемента документа иногда бывает необходимо отыскать структурно связанные части документа (родитель, братья, дочерний элемент). Объект

Document

можно представить как дерево объектов

Node

, как изображено на рис. 15.1. Тип

Node

определяет свойства, позволяющие перемещаться по такому дереву, которые будут рассматриваться в разделе 15.3.1. Существует еще один прикладной интерфейс навигации по документу, как дерева объектов

Element

. Этот более новый (и часто более простой в использовании) прикладной интерфейс рассматривается в разделе 15.3.2.

15.3.1. Документы как деревья узлов

Объект

Document

, его объекты

Element

и объекты

Text

, представляющие текстовые фрагменты в документе, - все они являются объектами

Node

. Класс

Node

определяет следующие важные свойства:

parentNode

Родительский узел данного узла или null для узлов, не имеющих родителя, таких как

Document

childNodes

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

NodeList

), обеспечивающий «живое» представление дочерних узлов.

firstChild, lastChild

Первый и последний дочерние узлы или null, если данный узел не имеет дочерних узлов.

nextSibling, previousSibling

Следующий и предыдущий братские узлы. Братскими называются два узла, имеющие одного и того же родителя. Порядок их следования соответствует порядку следования в документе. Эти свойства связывают узлы в двусвязный список.

nodeType

Тип данного узла. Узлы типа

Document

имеют значение 9 в этом свойстве. Узлы типа

Element

– значение 1. Текстовые узлы типа

Text

–

значение 3. Узлы типа

Comments

– значение 8 и узлы типа

DocumentFragment

– значение 11.

nodeValue

Текстовое содержимое узлов

Text

Comment

nodeName

Имя тега элемента

Element

, в котором все символы преобразованы в верхний регистр.

С помощью этих свойств класса

Node

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

Document

, как показано ниже:

document.childNodes[0].childNodes[1]

document.firstChild.firstChild.nextSibling

Допустим, что рассматриваемый документ имеет следующий вид:

<html><head><title>Test</title></head><body>Hello World!</body></html>

Тогда вторым дочерним узлом первого дочернего узла будет элемент

<body>.

В свойстве

nodeType

он содержит значение 1 и в свойстве

nodeName

– значение «BODY».

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

<html>

<head>,

этот символ перевода строки станет первым дочерним узлом (текстовым узлом

Text

) первого дочернего узла, а вторым дочерним узлом станет элемент

<head>,

а не

<body>

15.3.2. Документы как деревья элементов

Когда основной интерес представляют сами элементы документа, а не текст в них (и пробельные символы между ними), гораздо удобнее использовать прикладной интерфейс, позволяющий интерпретировать документ как дерево объектов

Element

, игнорируя узлы

Text

Comment

, которые также являются частью документа.

Первой частью этого прикладного интерфейса является свойство

children

объектов

Element

. Подобно свойству

childNodes

, его значением является объект

NodeList

. Однако, в отличие от свойства

childNodes

, список

children

содержит только объекты

Element

. Свойство

children

– нестандартное свойство, но оно реализовано во всех текущих броузерах. В IE это свойство было реализовано уже очень давно, и большинство других броузеров последовали его примеру. Последним основным броузером, реализовавшим его, стал Firefox 3.5.