Пройдем по DOM

Я думаю все, кто когда-нибудь работал с JavaScript слышали про объектную модель документа (Document Object Model или DOM). Собственно, благодаря ей правильные html страницы имеют древовидную структуру
. Я не хочу сейчас долго и нудно заумными словами рассказывать о структуре дерева, интерфейсах, свойствах узлов DOM и т.д., для этого существуют мануалы и документация. Перейдем сразу к сути.
Попробуйте подсчитать сколько DOM узлов в следующей строчке

<a href="www"><b>my text</b></a><!-- my comment -->

На первый взгляд может показаться, что 2. Или 3, если вспомнить про комментарий. Нажмите кнопку и узнаете точно. Исходник кнопки:

function testDOM(obj) {
	var list = obj.childNodes;
	for (var i = 0; i < list.length; i++) {
		alert("nodeName = " + list[i].nodeName + "nnodeType = " + list[i].nodeType
		+ "nnodeValue = " + list[i].nodeValue + "nattributes = " + list[i].attributes);
		if(list[i].hasChildNodes()) testDOM(list[i]);
	}
}



Сколько насчитали? Правильно - 4. Дело в том, что узел DOM это не контейнер, т.е. <b>link</b> это два узла (элемент B и TEXT_NODE), а не один (элемент B c nodeValue='my text'). Попутно познакомились со свойствами nodeName, nodeValue и attributes. Для html nodeName - это имя тега в верхнем регистре, nodeValue - содержимое (!)текстового узла, для ELEMENT_NODE nodeValue всегда null! Attributes наоборот: для TEXT_NODE всегда null, а для ELEMENT_NODE возвращает объект типа NamedNodeMap, содержащий список всех атрибутов данного узла.

Для понимания рассмотрим какие вообще типы узлов (node types) существуют, не забывая о том, что не только html, но и xml документы строятся по принципу объектной модели, поэтому некоторых типов узлов вы никогда можете не встретить на web странице.

Типы узлов DOM

Название Значение Описание
ELEMENT_NODE 1 Элемент
ATTRIBUTE_NODE 2 Атрибут
TEXT_NODE 3 Текст
CDATA_SECTION_NODE 4 Секция CDATA
ENTITY_REFERENCE_NODE 5 Ссылка на раздел
ENTITY_NODE 6 Раздел документа
PROCESSING_INSTRUCTION_NODE 7 Директива
COMMENT_NODE 8 Комментарий
DOCUMENT_NODE 9 Документ
DOCUMENT_TYPE_NODE 10 Тип документа
DOCUMENT_FRAGMENT_NODE 11 Фрагмент документа
NOTATION_NODE 12 Нотация

А теперь о главном: зачем это все нужно? Или в более удачной формулировке: где это можно применить? Применений, на самом деле, можно найти множество, поскольку DOM свойства представляют единственно возможный механизм доступа к содержимому уже(!) отрисованной страницы, а DOM методы позволяют не только его менять, но и создавать "на лету" без перезагрузки, а это не что иное как интерактивность. Не следует путать DOM и AJAX - это разные весовые категории. Интерактивность DOM ограничена машиной клиента - как не крути это JavaScript, а AJAX приложения взаимодействуют с сервером.

Хотите примеров? Их есть у меня! (IE как всегда особняком - DOM поддерживает по своему, т.е. КРИВО, заморачиваться не охото, поэтому в нем примеры могут криво работать)
1) пробежимся по строкам таблицы


2) пробежимся по ячейкам таблицы

3) или так

4) или так

5) и напоследок подсветим все НЕ

Тексты примеров в исходном коде страницы.

5 Комментарии “Пройдем по DOM

  1. Примеры придвинуть поближе к таблице бы надо.

  2. Ресурс замечательный. Весь изложенный здесь материал действительно отлично написан и объяснен на примерах, я даже не побоюсь слова "разжеван" и разложен по полочкам. Автору данного ресурса уважение и низкий поклон за его работу. Спасибо большое.

  3. Спасибо за нерабочий код в первом примере

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *