Передвижение по документу, свойства объекта Node-FirstChild, lastChild, previousSibling, nextSibling, parentNode, nodeName, nodeType.

Обход документа происходит сверху вниз и соблюдая иерархию узлов, исползуя:

• FirstChild свойство возвращает первый дочерний узел указанного узла, как объект Node.

Node - тип возвращаемых данных, т.е. какого типа будет полученная информация. Пример: Получить содержимое HTML первого дочернего узла элемента <UL>:
var x = document.getElementById("myList").firstChild.innerHTML;

• Псевдокласс:last-child задает стилевое оформление последнего элемента своего родителя.

• PreviousSibling свойство возвращает предыдущий узел указанного узла, в том же уровне дерева. Свойство, чтобы узнать номера всех соседий того же уровня.

• Свойство NextSibling возвращает узел сразу же после указанного узла, в том же уровне дерева.

Пример: var x = document.getElementById("item1").nextSibling.innerHTML;

Возвращенный узел возвращается в виде объекта Node. Разница между этим свойством и nextElementSibling, является то, что NextSibling возвращает следующий узел в качестве родственного узла элемента, текстового узла или узла комментария, в то время как nextElementSibling возвращает следующий узел в качестве родственного узла элемента (игнорирует текст и узлы комментариев).

• Свойство ParentNode возвращает родительский узел указанного узла, как объект Node

В HTML, сам документ является родительским узлом HTML элемента, голова и тело являются дочерними узлами HTML - элемента. Это свойство только для чтения.

• Свойство NodeName возвращает имя указанного узла. (Если узел является узлом элемента, свойство NodeName вернет имя тега. Если узел является узлом атрибута, свойство NodeName возвращает имя атрибута. (Для других типов узлов, свойство NodeName будет возвращать разные имена для разных типов узлов.)

• Свойство NODETYPE возвращает тип узла, как число, указанного узла. (Если узел является узлом элемента, свойство NODETYPE возвращает 1. Если узел является узлом атрибута, свойство NODETYPE вернет 2. Если узел является текстовым узлом, свойство NODETYPE вернет 3. Если узел является комментарием узла, свойство NODETYPE вернется 8. Это свойство только для чтения.)

 

Примеры управления структурой документа, свойствами и элементами и атрибутами тэгов на основе объектов DOM, стилей и сценариев Java-script.

Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) - объектная модель, используемая для XML/HTML-документов.

Согласно DOM-модели, документ является иерархией.

Каждый HTML-тег образует отдельный элемент-узел, каждый фрагмент текста - текстовый элемент, и т.п.

Проще говоря, DOM - это представление документа в виде дерева тегов. Это дерево образуется за счет вложенной структуры тегов плюс текстовые фрагменты страницы, каждый из которых образует отдельный узел

Зачем, кроме красивых рисунков, нужна иерархическая модель DOM?

Очень просто:

Каждый DOM-элемент является объектом и предоставляет свойства для манипуляции своим содержимым, для доступа к родителям и потомкам.

Для манипуляций с DOM используется объект document.

Используя document, можно получать нужный элемент дерева и менять его содержание.

Например, этот код получает первый элемент с тэгом ol, последовательно удаляет два элемента списка и затем добавляет их в обратном порядке:

1 var ol = document.getElementsByTagName('ol')[0]

2 var hiter = ol.removeChild(ol.firstChild)

3 var kovaren = ol.removeChild(ol.firstChild)

4 ol.appendChild(kovaren)

5 ol.appendChild(hiter)

В старых руководствах и скриптах можно встретить модификацию HTML-кода страницы напрямую вызовом document.write.

В современных скриптах этот метод почти не используется, случаи его правильного применения можно пересчитать по пальцам.

 

Модель событий DOM, объекты Event (свойства type, target); MouseEvent (свойства button, clientX, clientY, screenX, screenY и др.)

В DOM документ представляется в виде древовидной структуры (рис. 19), являющейся одной из наиболее употребительных структур в программировании. Это обеспечивает унифицированный способ навигации по документу.

При обработке события браузер автоматически передает в функцию обработчика в качестве параметра объект Event, который инкапсулирует всю информацию о событии. И с помощью его свойств мы можем получить эту информацию:

type: указывает на имя события

target: указывает на элемент, на котором было вызвано событие
Как изменить фоновый цвет с помощью команды Target:

function handler(e){

e.target.style.backgroundColor = "red";

Интерфейс MouseEvent наследует свойства и методы интерфейсов Event и UIEvent, а также определяет следующие дополнительные свойства:

Button

Число, указывающее, какая кнопка мыши изменила свое состояние во время события mousedown, mouseup или click. Значение 0 обозначает левую кнопку, 1 – среднюю кнопку, а 2 – правую кнопку. Это свойство применяется, только когда кнопка изменяет состояние, и не применяется, например, для получения информации о том, удерживается ли нажатой кнопка во время события mouse move.

ClientX, clientY

Эти два свойства указывают координаты X и Y указателя мыши относительно клиентской области или окна браузера. Обратите внимание, что данные координаты не учитывают прокрутку документа: если событие происходит в верхнем крае окна, значение свойства clientY равно 0 независимо от того, насколько далеко был прокручен документ. К сожалению, DOM Level 2 не предоставляет стандартного способа трансляции оконных координат в координаты документа. В браузерах, не относящихся к линейке Internet Exploer, можно сложить значения window.pageXOffset и window.pageYOffset.

ScreenX, screenY

Эти два свойства задают координаты X и Y указателя мыши относительно верхнего левого края дисплея. Эти значения полезны, если вы планируете открыть новое окно в месте возникновения события мыши или рядом с ним.