Document Object Model (DOM)

Структура любого HTML-документа представляет собой дерево, в корне которого расположен тег (точнее сказать, узел) HTML. Дочерними узлами HTML являются узлы HEAD и BODY, у которых, в свою очередь, есть собственные дочерние узлы.

В структуре дерева могут существовать узлы разных типов, они представлены в таблице:

Описание	Пример
Определяет тип HTML документа	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www. w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Верхний элемент в структуре HTML-дерева	<html>
HTML комментарий	<!-- this is comment -->
HTML элемент (тег)	<p> … </p>
Атрибут HTML элемента	bgcolor=”red”
Текст, содержащийся внутри HTML элемента	Content of paragraph

Каждый HTML-тег может иметь атрибут id, который позволяет быстро получить доступ к этому элементу с помощью метода getElementById объекта document. Приведем пример кода внутри тега BODY:

<p id="myP">Hello, World!</p>

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

//выведет на экран фразу Hello World!

var str = "";

str += document.getElementById("myP").nodeName + '\n';

str += document.getElementById("myP").nodeValue + '\n';

str += document.getElementById("myP").nodeType + '\n';

alert(str);

//выведет на экран «P null 1»

</script>

На экран вывелось nodeValue, равное null, потому что на самом деле внутри узла <p> есть еще один текстовый узел, в котором содержится искомый текст «Hello, World!». Для того чтобы получить доступ к этому значению, используется следующая строка:

document.getElementById("myP").childNodes[0].nodeValue;

Каждый узел DOM имеет ряд свойств:

nodeName – имя узла;

nodeValue – значение узла;

nodeType – номер, соответствующий типу узла;

parentNode – ссылка на родительский узел, если он существует;

childNodes – список дочерних узлов;

firstChild – первый дочерний элемент;

lastChild – последний дочерний элемент;

previousSibling – указывает на предыдущий соседний узел, если у родительского узла несколько дочерних и текущий узел не первый дочерний;

nextSibling – указывает на следующий соседний узел, если у родительского узла несколько дочерних и текущий узел не последний дочерний;

attributes – список атрибутов;

ownerDocument – указатель на объект document, которому принадлежит текущий узел.

Чтобы проиллюстрировать иерархию узлов DOM, приведем пример:

<table>

text</span>

</td>

</tr>

</table>

alert(document.getElementById("currentNode").parentNode.id);

//выведет на экран firstRow

alert(document.getElementById("currentNode").childNodes[0].id);

//выведет на экран spanNode

alert(document.getElementById("currentNode").firstChild.id);

//выведет на экран spanNode

alert(document.getElementById("currentNode").lastChild.id);

//выведет на экран pNode

alert(document.getElementById("currentNode").previousSibling.id);

//выведет на экран firstCell

alert(document.getElementById("currentNode").nextSibling.id);

//выведет на экран lastCell

alert(document.getElementById("currentNode")

.attributes["width"].value);

//выведет на экран 10

alert(document.getElementById("currentNode")

.ownerDocument.nodeName);

//выведет на экран #document

</script>

Помимо метода getElementById(), существует несколько других, облегчающих доступ к необходимым элементам документа. Метод getElementsByName() возвращает коллекцию элементов с определенным атрибутом name, а метод getElementsByTagName() возвращает коллекцию элементов (тегов) с одинаковым именем. Оба метода принадлежат объекту document.

Создание новых узлов

DOM поддерживает следующие методы, связанные с созданием новых узлов:

createAttribute(name) – создает атрибут с именем, переданным в параметре;

createComment(string) – создает HTML-комментарий в виде
, текст комментария передается в параметре;

createDocumentFragment() – создает новый документ для хранения новых узлов;

createElement(tagName) – создает узел (тег) с именем, переданным
в параметре;

createTextNode(string) – создает текстовый узел с содержанием, переданным в параметре.

Все методы принадлежат объекту document.