пройдем по 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 поддерживает по своему, т.е. КРИВО, заморачиваться не охото, поэтому в нем примеры могут криво работать) 1) пробежимся по строкам таблицы 2) пробежимся по ячейкам таблицы 3) или так 4) или так 5) и напоследок подсветим все НЕ Тексты примеров в исходном коде страницы.
Комментарии:Prax 17.11.08 19:18 Спасибо, полезная информация. anonymous 22.07.09 15:20 Примеры придвинуть поближе к таблице бы надо. Дмитрий 30.08.10 12:58 Ресурс замечательный. ниграеп 04.01.11 16:18 Спасибо за нерабочий код в первом примере Если вам помогла или просто понравилась эта статья вы можете отблагодарить автора кликнув по рекламе. Спасибо! комментировать:
прежде чем писать комментарий убедитесь, пожалуйста, что он не попадает в нижеследующие категории:
прямые оскорбления кого бы то ни было будут удалятся! от кого: |
