Document Object Model (DOM)

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

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

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

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

<script type="text/javascript">

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, приведем пример:

<!-- пример # 8: иерархия узлов DOM-->

<table>

<tr id="firstRow">

<td id="firstCell"></td>

<td id="currentNode" width="10">

<span id="spanNode">

text</span>

<p id="pNode">text</p>

</td>

<td id="lastCell"></td>

</tr>

</table>

<script type="text/javascript">

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.

Поиск по сайту: