Пройдем по 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

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

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