Html Dom

  • 09 дек. 2012 г.
  • 3998 Слова
HTML DOM
HTML DOM расшифровывается HTML Document Object Model (Объектная Модель HTML Документа).
HTML DOM позволяет читать и изменять содержимое HTML элементов страницы из скриптов.
HTML DOM может использоваться со многими языками программирования, но наиболее часто DOM используют в связке с JavaScript.
HTML DOM является W3C стандартом, поэтому все современные браузеры поддерживают даннуютехнологию.
Объектная структура
При открытии любого HTML документа браузер предварительно производит разбор его содержимого и на основе этого разбора создает объектную модель HTML документа или более коротко DOM.
DOM состоит из вложенных в друг друга в иерархическом порядке объектов, которые называются узлами. Каждый узел в структуре представляет располагающийся на странице HTML элемент.
ИспользуяDOM Вы можете взаимодействовать (считывать, изменять, удалять) с содержимым HTML документов из скриптов.
Ниже располагается код HTML документа и DOM, которая бы была создана браузером на основе этого кода:


HTML DOM


HTML DOM.
Привет всем.




[pic]
Все прямоугольники изображенные на картинке являются объектами (или узлами). Разным цветом на изображение отмечены узлы разного типа.Красным цветом отмечен узел Document. Любое обращение к DOM должно начинаться с обращения к данному узлу.
Зеленым цветом отмечены элементные узлы. Для каждого HTML элемента на странице браузер создает соответствующий элементный узел.
Содержимое элементов хранится в текстовых узлах. Текстовые узлы отмечены на нашей схеме синим цветом.
Для каждого атрибута HTML элемента создается атрибутный узел.Атрибутный узел отмечен на схеме розовым цветом.
Обратите внимание: не забывайте, что текст всегда хранится в текстовых узлах, а не является свойством элемента. Т.е. для того, чтобы обратится к содержимому HTML элемента Вы должны обратится к свойству его текстового узла.
Отношения между узлами
Узлы в объектной структуре связаны друг с другом. Существует несколько специальных терминов для описанияотношений между узлами:
Родительский узел (parent node) - родительским узлом по отношению к рассматриваемому объекту является узел, в который вложен рассматриваемый объект. На нашей схеме по отношению к узлам и является родительским. Для узла родительским является узел .
Узлы потомки (child node) - узлом потомком по отношению к рассматриваемому объекту является узел, который вложен врассматриваемый объект. На нашей схеме по отношению к узлу и являются потомками. Для узла потомком является .
Узлы братья (sibling node) - узлы находящиеся на одинаковом уровне вложенности по отношению к их родительскому узлу. На нашей схеме узлами братьями являются и , и .
Самый верхний узел в DOM называется корневым. На нашей схеме корневым является (т.к. объект document не является частью DOM).
Пример
/*Прочитаем содержимое элемента p, перемещаясь по объектной и выведем результат на страницу
1. Обратимся к первому объекту потомку элемента body (h1).
2. Перейдем к следующему узлу брату. (p)
3. Обратимся к текстовому узлу соответствующего элемента.
4. Обратимся к содержимому текстового узла */
document.write(document.body.childNodes[0].nextSibling.childNodes[0].nodeValue);
Обращение к элементамУсловно можно сказать что обращаться к элементам в DOM можно двумя различными способами:
1. Использовать последовательное перемещение по объектной структуре до нахождения необходимого элемента.
2. Использовать прямое обращение к элементу по его идентификатору или имени тэга.
Второй способ безусловно проще и удобнее и в повседневной практике всегда используют именно его. Однако в учебных целях полезноразобрать оба способа.
Последовательное перемещение
Вернемся к DOM из второй главы и представим, что нам нужно прочитать текстовое содержимое ее элемента p.
Красной стрелкой и черными кружками с цифрами отмечено как последовательно будет выглядеть перемещение по объектной структуре:
[pic]
Разберем процесс перемещения подробнее:
1. Обращаемся к объекту...
tracking img