Document Object Model (DOM) в Java Script

Структура любого 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>

<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.

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

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

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

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

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

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

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

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

Добавление новых узлов в документ

Для добавления новых узлов в текущий документ используются следующие методы:

insertBefore(newChild, referenceChild);

appendChild(newChild).

Оба эти метода добавляют новый узел newChild к существующему в документе, appendChild() добавляет новый узел после всех дочерних, insertBefore() добавляет новый узел перед дочерним узлом, указанным
в параметре referenceChild.

Кроме этого, существует метод для копирования существующего узла. В качестве параметра можно указать, должны ли копироваться все дочерние узлы, по умолчанию значение параметра false:

cloneNode(deepСlone).

Удаление и замена узлов в документе

Для удаления узла используются методы:

currentNode.removeChild(child) – в качестве параметра принимает узел для удаления.

currentNode.replaceChild(newChild, oldChild) – заменяет узел oldChild на newChild.

Оба метода должны принадлежать узлу currentNode, у которого удаляются или заменяются дочерние узлы.

Использование каскадных таблиц стилей в DOM

Каждый узел DOM имеет объект style, который описывает применяемые стили. Например, можно изменить цвет шрифта тега <p>, document.getElementById("samplePtag").style.color = «red».

Более подробно обо всех свойствах можно узнать в спецификации CSS (http://www.w3.org/Style/CSS/#specs).

Свойство элемента innerHTML и outerHTML

Кроме методов, описанных выше, для изменения структуры документа испоьзуется более простой метод, основанный на использовании свойств элементов DOM – innerHTML и outerHTML. innerHTML содержит HTML-код между открывающим и закрывающим тегом. С помощью этого свойства можно работать с кодом внутри тега, как со строкой – считывать и записывать. Однако для следующей группы элементов это свойство доступно только для чтения: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.

По определению свойство innerHTML не существует у элементов, которые не имеют одновременно открывающего и закрывающего тега (например <br>).

Отличие свойства outerHTML в том, что это свойство включает в себя HTML-код между открывающим и закрывающим тегом, а также открывающий
и закрывающий тег этого элемента.

Для следующих элементов это свойство доступно только при чтении: CAPTION, COL, COLGROUP, FRAMESET, HTML, TBODY, TD, TFOOT, TH, THEAD, TR.

Свойство outerHTML доступно для записи только после того, как весь документ будет загружен, т.е. произойдет событие window.onload.

Ниже приведен пример использования свойств innerHTML и outerHTML:

<!– пример # 9: использование свойств –>

<html><head>

<script type="text/javascript">

function transformBody() {

var myPar = document.getElementById("myP");

myP.innerHTML = "<i>Hello World!</i>";

myP.outerHTML = "<strong>" + myP.innerHTML

+ "</strong>";

}

</script>

</head>

<body onload="transformBody();">

<p id="myP">sample text</p>

</body>

</html>

<!– после выполнения функции структура элемента body будет:

<BODY><STRONG><I>Hello World!</I></STRONG></BODY>

–>

Свойства innerHTML и outerHTML не являются официально поддерживаемыми стандартами, однако они поддерживаются всеми современными браузерами. Свойством outerHTML следует пользоваться с большой осторожностью, так как оно поддерживается в меньшем количестве браузеров (например, оно не работает в браузере Firefox).

Вы можете следить за любыми ответами на эту запись через RSS 2.0 ленту. Вы можете оставить ответ, или trackback с вашего собственного сайта.

Оставьте отзыв

XHTML: Вы можете использовать следующие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

 
Rambler's Top100