Что такое DOM?

DOM - Document Object Model. Собственно, чтобы пользоваться этим нужно совсем немного - уяснить для себя, что документ HTML это не более, чем дерево объектов(узлов), где каждый узел это тег. К дереву можно добавлять узлы(appendChild), удалять(removeChild), менять их местами(replaceChild), вставлять один узел после другого(insertBefore), клонировать узлы(CloneNode) и наконец создавать новый узел дерева(CreateElement). У каждого узла может быть первый потомок(firstChild), последний потомок(lastChild) и вообще сколько угодно потомков(childNodes). Кроме того естественно каждый узел дерева содержит ссылку на родителя(parentNode). Вот и вся палитра DOM...

Что такое деревья?

Под деревьями в данном случае понимается любой объект представляющий из себя HTML тег. Например, такое дерево возвращает элемент GetElementById(в этом случае дерево уже существует) или CreateElement(в этом случае дерево только что создали).

Как работать с DOM?

Ниже приведен простой пример как к тегу body с помощью DOM добавить новый узел:
code_7611.txt

Собственно основное применение DOM как раз и сводится к тому, чтобы модифицировать тело документа самым удобным и быстрым образом без перезагрузки всей страницы в целом.

Форум HiAsm

На форуме HiAsm примером дерева может слухить панель для написания сообщения. Её корень лежит в глобальной переменной topic_form(в этом можно убедиться, если выполнить в консоле команду eval topic_form). Именно это дерево клонируется всякий раз, где оно требуется и именно его модифицируют плагины. Это дерево можно использовать для наглядного изучения DOM структуры, вводя в консоль примерно такие команды:

после изучения этого дерева станет понятно, почему в плагине mybtn или my_icq кнопка добавляется вот так: