Вверх ↑
Этот топик читают: Гость
Ответов: 446
Рейтинг: 7
#1: 2007-11-06 20:31:31 ЛС | профиль | цитата
Собсвтенно, очень интересен хотя бы один примерчик, хотя бы маленькое разяснение.
Т.К. все слышали что, есть такой DOM, но никто не знает для каких великих целей он нужен.
Это я за себя говорю.
карма: 0
Время верстки: Текущее время: %time%
0
Ответов: 3514
Рейтинг: 184
#2: 2007-11-06 20:56:30 ЛС | профиль | цитата
Почитать и посмотреть один пример и кучу ссылок - http://ru.wikipedia.org/wiki/DOM
карма: 0
0
Администрация
Ответов: 15295
Рейтинг: 1519
#3: 2007-11-06 21:29:26 ЛС | профиль | цитата
Что такое 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 структуры, вводя в консоль примерно такие команды:

eval topic_form.nodeName
eval topic_form.firstChild.nodeName
eval topic_form.firstChild.firstChild.nodeName
eval topic_form.firstChild.firstChild.childNodes.length
eval topic_form.firstChild.firstChild.childNodes[0].nodeName

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

topic_form.firstChild.firstChild.firstChild.childNodes[4].childNodes[2].appendChild(btn1);
карма: 27
0
файлы: 1code_7611.txt [558B] [879]
Ответов: 3514
Рейтинг: 184
#4: 2007-11-06 21:35:30 ЛС | профиль | цитата
code_7611.txt кидает на главную страницу старого форума O_o
карма: 0
0
Ответов: 446
Рейтинг: 7
#5: 2007-11-06 21:43:03 ЛС | профиль | цитата
Да, и меня тоже
карма: 0
Время верстки: Текущее время: %time%
0
Администрация
Ответов: 15295
Рейтинг: 1519
#6: 2007-11-06 21:46:08 ЛС | профиль | цитата
в режиме редактирования сообщения аттачи не доступны
карма: 27
0
Ответов: 446
Рейтинг: 7
#7: 2007-11-06 21:50:05 ЛС | профиль | цитата
Dilma писал(а):
в режиме редактирования сообщения аттачи не доступны

Ясно.

Посмотрел пример. Очень наглядно. Спасибо.

P.S.
Кстати, А можно сделать так, что бы при на жатии "Цитата" сразу открывалась форма для добавления сообщения и вставлялась сама "Цитата"?
А то я постоянно забываю теперь нажать на кнопку "Ответить"
карма: 0
Время верстки: Текущее время: %time%
0
Администрация
Ответов: 15295
Рейтинг: 1519
#8: 2007-11-06 21:55:00 ЛС | профиль | цитата
Stasie писал(а):
что бы при на жатии "Цитата" сразу открывалась форма для добавления сообщения и вставлялась сама "Цитата"?

добавлено
карма: 27
0
8
Сообщение
...
Прикрепленные файлы
(файлы не залиты)