Я думаю все, кто когда-нибудь работал с 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 поддерживает по своему, т.е. КРИВО, заморачиваться не охото, поэтому в нем примеры могут криво работать)
Тексты примеров в исходном коде страницы.
Спасибо, полезная информация.
Примеры придвинуть поближе к таблице бы надо.
Ресурс замечательный. Весь изложенный здесь материал действительно отлично написан и объяснен на примерах, я даже не побоюсь слова "разжеван" и разложен по полочкам. Автору данного ресурса уважение и низкий поклон за его работу. Спасибо большое.
Спасибо за нерабочий код в первом примере
дурацкий шрифт и разметка