Лекция 7. Модель DOM

7.1. Структура документа DOM

DOM – Document Object Model – программный интерфейс XML (и HTML) документов.

Уровни DOM

  • Уровень 0. Включает в себя все специфические модели DOM, которые существовали до появления (см., например, лекцию 6) Необходимо обратить внимание, что эти модели формально не являются спецификациями DOM, опубликованными W3C, а скорее являются информацией о том, что существовало до начала процесса стандартизации.
  • Уровень 1 (1998). Появление понятия узел.
  • Уровень 2 (2000-2004). Поддержка пространства имён.
  • Уровень 3 (с 2004).

DOM представляет документ как иерархию узлов (node). На вершине иерархии узел – document, который представляет собой весь документ. В качестве узлов представлено все содержимое документа: HTML-элементы, атрибуты и текст.

Для обсуждения свойств и методов будем использовать следующий фрагмент:

<div>

<ul id=»components»>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript </li>

</ul>

</div>

7.2. Навигация по дереву документа

Навигацию можно начать с любого узла, у которого известен идентификатор.

var oList=document.getElementById(«components»)

Также в случае корректной страницы можно указать document.documentElement – самый верхний уровень.

Ссылка на родительский элемент:

var oParent=oList.parentNode

Дочерние элементы представляют собой коллекцию, на элемент которой ссылаются так:

var oItem1=oList.childNodes[1]

В данном случае это будет элемент <li>CSS</li>.

На первый и последний дочерний элемент ссылаются так: firstChild, lastChild.

Кроме этого можно сослаться на соседние узлы одного уровня:

var oPreviousSibling=oList.previousSibling

var oNextSibling=oList.nextSibling

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

Методы: createElement(), createTextNode().

Рассмотрим, как добавить к нашему списку элемент <li> XML</li>.

Первым делом создаем узел LI. Для этого даем команду

var oItem=document.createElement(«LI»)

Рекомендуется писать название тегов заглавными буквами.

Далее создаем содержимое узла:

var oText=document.createTextNode(«XML»)

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

7.4. Редактирование дерева документов

Приведем некоторые методы для редактирования дерева документов.

Вставка: appendChild(), insertBefore().

Копирование: cloneNode().

Замещение: replaceChild().

Удаление: removeChild().

 Присоединим узел oText к узлу oItem:

oItem.appendChild(oText)

Теперь в памяти имеется веточка <li>XML</li>. Добавим ее в конец узла oList:

oList.appendChild(oItem)

После последней команды в списке должен появиться элемент XML.

Для вставки в произвольное место можно использовать метод insertBefore(), например, так:

oList.firstChild.nextSibling.insertBefore(oItem)

Для копирования узла используется метод cloneNode(). Пример:

var oClone=oList.cloneNode(true)

Если установлен параметр true, то узел копируется со всеми потомками.

Далее скопированный узел можно добавить к списку:

oList.appendChild(oClone)

Замена последнего элемента:

var oItem=document.createElement(«LI»)

oItem.appendChild(document.createTextNode(«JS»))

oList.replaceChild(oItem,oList.lastChild)

Пример удаления:

var oRemovedItem=oList.removedChild(oList.lastChild).

7.5. Работа с массивами элементов

Свойство getElementById позволяет обращаться к элементу, у которого известен идентификатор. В случае, когда надо работать с определенными тегами, полезным является свойство getElementsByTagName, которое возвращает все указанные теги в виде массива.

Пример. Выделение красным цветом каждой второй строки таблицы с использованием метода getElementsByTagName.

<body>

<table border=»1″>

<tr><td>1</td><td>1</td><td>1</td></tr>

<tr><td>1</td><td>1</td><td>1</td></tr>

<tr><td>1</td><td>1</td><td>1</td></tr>

</table>

</body>

<script>

         a=document.getElementsByTagName(«tr»)

         n=a.length

         for(i=0;i<n;i=i+2)

         {a[i].style.color=»red»}

</script>

Поделиться:
  • Добавить ВКонтакте заметку об этой странице
  • Мой Мир
  • Facebook
  • Twitter
  • LiveJournal
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • StumbleUpon
  • Technorati
  • БобрДобр
  • Memori.ru
  • МоёМесто.ru