Корень Документа (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 года. Какие-то факты могли утратить актуальность.