DOM-дерево

Документы хтмл и хмл представляются иерархичной структурой, DOM-деревом.

document - это корень документа.
У него есть следующие дети:

• document.documentElement - html тег.
• document.body - body тег.
• И еще одним ребенком представляется <!DOCTYPE >, но это незачем использовать.

Узлами этого дерева являются текстовые ноды и ноды тегов, также нодами являются атрибуты тегов, но в веб-програмировании принято об этом не говорить, атрибуты принято считать свойствами нодов-тегов.


ie норамализирует ДОМ, у него нет в составе пустых текстовых-нодов.
В  ff и chrome перед и после каждого елемента(тега) находится пустой тектовый нод.
В opera как в ff и chrome, но еще +1 к общей сумме вокругтеговых пустых текст-нодов.

ДОМ-нод имеет много свойст, которые мы можем просто читать, а некоторые и править.
elem.nodeType у него может быть 12 значений, но в веб-программировании используется только два:
Node.ELEMENT_NODE = 1
Node.TEXT_NODE = 3

elem.tagName upper-case название тега(DIV, OL)

elem.style.{zIndex, width, background and etc.}

elem.innerHTML - самое интресное, что это было строго ie-шное свойство, но теперь это достояние всех браузеров. Текстовое представление ДОМ-поддерева нодов-детей, можем как читать, так и править.

elem.className  - значение атрибута class

elem.on{eventname} - один из видов привязки событий к ДОМ-узлу.
elem.parentNode
elem.childChodes - это не просто массив, а некая динамическая сущность DOMNodeList, в которой при изменении колисчесва элементов сразу же просходит сдвиг и обновление размера этого массива. Поэтому мы не можем просто перебором от 0 до N, эдалить елементы. Для этого нужно тестируя на каждой итерации длину!=0, удалять 0-й элемент массива.
elem.firstChild
elem.lastChild
elem.previousSibling
elem.nextSibling

Кроме свойст обьект дом-нод имеет еще и методы:

elem.insertBefore(elem2)
elem.appendChild(elem2)
elem.removeChild(elem2)


В дом-нода есть понятие атрибута, а есть свойства. Отличие вот в чем: атрибут - это свойство нода как хтмл-елемента, а свойство - это свойство нода как обьекта javascript.
Вот методы, которые обслуживают атрибуты:
setAttribute(name, value)   
getAttribute(name)   
hasAttribute(name)
removeAttribute(name)

Кроме того реализован механизм синхронизации между стандартными атрибутами и свойствами с такими именами. Тоесть если мы изменим атрибут, то поменяется и свойство с таким именем, и наоборот. Только вот есть некоторые атрибуты, имена соответсвующих свойст отличаются от ихних: class - className; for - forHtml.
Еще что стоит отметить, это то, что атрибуты регирстронезависимы, а свойства зависимы.

Атрибут в браузерах - это всегда текст, а вот в ие - это обьект.

Для поиска элементов по ДОМ-дереву используются слудующие методы:

document.getElementById
document.getElementsByTagName
document.getElementsByName
document.getElementsByClassName - не реализован в ие.

При этом два из этих метода можно применять на конкретном дом-ноде, если у него есть дети:
elem.getElementsByTagName
elem.getElementsByClassName - не реализован в ие.

Чтобы получить всех детей елемента без учета иерархии нужно исльзовать:
elem.getElementsByTagName("*")