До того, как модель 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
Допустим, что рассматриваемый документ имеет следующий вид:
Тогда вторым дочерним узлом первого дочернего узла будет элемент
<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.