Введение в Объектную Модель Документа 2

Корень Документа (Document Root)
Перемещение по Дереву Документа
Прямой доступ к элементам

Корень Документа (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>
<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";



Много комментариев (7) к “Введение в Объектную Модель Документа 2”

  1. alex :

    Cool!


  2. Powermic :

    Доходчиво, но ничего нового, почерпнуть не удалось.


  3. ZZZubec :

    прикольно, но мало 8)
    а главное – “Просто и Понятно”
    зачет…


  4. протопоп Аввакум :

    Да, действительно просто и понятно. Спасибо. Начинаю потихоньку въезжать в этот пугающий DOM…


  5. Иван :

    Все очень толково.. Спасибо что перевели.


  6. wbrframe :

    Я только начинаю знакомится с DOM.
    Очень доходчиво. Спасибо!


  7. go_most :

    5+



22 queries 0.166 seconds.