Работа с DOM на "чистом" JavaScript за 10 минут

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

Попробуйте подсчитать сколько DOM узлов в следующей строчке

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

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

var msg = "";

function testDOM(obj) {
	var list = obj.childNodes;

	for (var i = 0; i < list.length; ++i) {
		msg += "nodeName = " + list[i].nodeName
			+ "\nnodeType = " + list[i].nodeType
			+ "\nnodeValue = " + list[i].nodeValue
			+ "\nattributes = " + list[i].attributes + "\n\n";

		if (list[i].hasChildNodes()) {
			testDOM(list[i]);
		}
	}
}

Сколько насчитали? Правильно - 4. Дело в том, что узел DOM это не контейнер, т.е. <b>link</b> это два узла (элемент B и TEXT_NODE), а не один (элемент B c nodeValue='my text'). Попутно познакомились со свойствами nodeName, nodeType, nodeValue и attributes. Для html nodeName - это имя тега в верхнем регистре. От свойства nodeType зависит содержание других свойств. Для TEXT_NODE 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 приложения взаимодействуют с сервером.

Хотите примеров? Их есть у меня!

1. пробежимся по строкам таблицы go
2. пробежимся по ячейкам таблицы go
3. или так go
4. или так go
5. и напоследок подсветим все НЕ на странице go

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

Быть добру!