Введение в Объектную Модель Документа (DOM), часть 2 из 6

Корень Документа (Document Root)

Объект document является основанием дерева документа. Он обслуживается тем же интерфейсом, что и узел (Node). У него есть дочерние узлы (child nodes), но отсутствуют родительский узел (parent node) и узлы одного с ним уровня, так как он начальный узел. В добавление к существующему Node-интерфейсу, он содержит Document-интерфейс.

Этот интерфейс содержит методы доступа к другим узлам и создания новых узлов в дереве документа. Вот некоторые из них:

  • getElementById()
  • getElementsByTagName()
  • createElement()
  • createAttribute()
  • createTextNode()

Эти методы не такие, как у других узлов. Они могут быть только у объекта document. Все указанные выше методы (кроме getElementsByTagName()) могут использоваться только объектом document, т.е. их синтаксис должен быть: document.methodName().

Объект document может содержать и некоторые другие свойства устанавливаемые более ранними версиями DOM. Например многие браузеры все еще поддерживают массивы document.images и document.links или свойства document.bgColor и document.fgColor, соответствовавшие атрибутам bgcolor и text тэга <body>.

Эти свойства предназначены для обеспечения обратной совместимости, чтобы web-страницы, созданные для старых браузеров, могли правильно отображаться в новых браузерах. Они все еще используются в скриптах, но их не стоит применять, т.к. в будущем они могут больше не поддерживаться.

Перемещение по Дереву Документа

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

Формально, объект document имеет только один дочерний элемент (child element) устанавливаемый как document.documentElement. Для web-страниц он установлен тэгом <html>, который является корневым элементом дерева документа. У него есть дочерние элементы, установленные тэгами <head> и <body>, у которых в свою очередь, есть другие дочерние элементы.

Учитывая это и используя методы интерфейса Node можно перемещаться по дереву документа и обращаться к любому узлу этого дерева. Рассмотрим пример:

<html>
  <head>
    <title></title>
  </head>
  <body><p>Здесь какой-то текст.</p></body>
</html>

и этот код:

alert(document.documentElement.lastChild.firstChild.tagName);

который покажет "p", название тэга,представленного этим узлом. В этом коде:

  • document.documentElement – возвращает тэг <html>.
  • .lastChild – возвращает последний дочерний элемент для <html>, т.е. тэг <body>.
  • .firstChild – возвращает первый дочерний элемент внутри <body>.
  • .tagName – возвращает название тэга, в данном случае "p".

При этом всплывает очевидная проблема доступа к узлам. Достаточно изменить код документа, например, если добавить другие элементы, текст или изображения, то будет изменена структура дерева документа. И путь к этому узлу также может измениться.

Менее очевидна совместимость с доступом к узлам в некоторых браузерах. В приведенном выше примере между тэгами <body> и <p> нет ничего, даже пробелов, а теперь мы добавим между ними пару переводов строки до и после <p>:

<html>
  <head>br>
    <title></title>
  </head>
  <body>
    <p>Здесь какой-то текст.</p>
  </body>
</html>

В этом случае Netscape обнаружит в этих местах новые узлы, тогда как IE не станет этого делать. В Netscape вышенаписанный код JavaScript покажет “undefined”, т.к. теперь в этом месте появился текстовый узел в виде пробела. Так как это не узел элемента, он не содержит теперь имени тэга. С другой стороны, IE не добавит узлов для таких пробелов, как здесь и по прежнему будет указывать на тэг “p”.

Прямой доступ к элементам

Для этого существует удобный метод document.getElementById(). Для работы с ним необходимо добавить атрибут id тэгу “p” (да и любому другому тоже можно), тогда появляется возможность обращаться к элементу напрямую:

<p id="myP">Здесь какой-то текст.</p>

...

alert(document.getElementById("myP").tagName);

В этом случае можно не опасаться некоторой несовместимости браузеров, а также того, где в дереве документа размещен узел для тэга “p”. Важно лишь помнить о том, что атрибут id должен быть уникальным в пределах этого документа.

Более сложный доступ к узлу элемента представлен методом document.getElementsByTagName(). Он возвращает массив узлов всех элементов документа, содержащих указанный HTML тэг. Для примера, сделать все ссылки на странице красными можно таким образом:

var nodeList = document.getElementsByTagName("a");
for (var i = 0; i < nodeList.length; i++)
  nodeList[i].style.color = "#f00";

Далее про типы узлов и атрибуты.

Внимание! Это материал 2005 года. Какие-то факты могли утратить актуальность.