Здесь показаны различия между двумя версиями данной страницы.
— |
dom [2015/04/24 04:07] (текущий) |
||
---|---|---|---|
Строка 1: | Строка 1: | ||
+ | ====== DOM ====== | ||
+ | * [[javascript?&#obekty_javascript_dom|Объекты JavaScript]] | ||
+ | **DOM** (Document Object Model) - объектная модель, используемая для представления [[XML]]- документов. DOM модель не зависит ни от платформы ни от языка, поэтому для доступа к информации DOM и ее изменения могут использоваться различные языки программирования, например [[JavaScript]]. | ||
+ | Согласно DOM- модели, документ является иерархией. Каждый HTML- тег образует отдельный элемент-узел, каждый фрагмент текста - текстовый элемент, и т.п. DOM - это представление документа в виде дерева тегов. Это дерево образуется за счет вложенной структуры тегов плюс текстовые фрагменты страницы, каждый из которых образует отдельный узел. | ||
+ | |||
+ | * **Простейший DOM:** | ||
+ | Построим, дерево DOM для следующего документа. | ||
+ | <file html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <title>Заголовок</title> | ||
+ | </head> | ||
+ | <body> | ||
+ | hello | ||
+ | </body> | ||
+ | </html> | ||
+ | </file> | ||
+ | Самый внешний тег - <html>, поэтому дерево начинает расти от него. Внутри <html> находятся два узла: <head> и <body> - они становятся дочерними узлами для <html>. Теги образуют узлы-элементы (element node). Текст представлен текстовыми узлами (text node). И то и другое - равноправные узлы дерева DOM. {{ ::dom_node.jpg |}} | ||
+ | ====== Загрузка HTML DOM ====== | ||
+ | * **Загрузка HTML DOM.** Последовательность операций в браузере при загрузке Web страницы: | ||
+ | - Синтаксический анализ HTML. | ||
+ | - Загрузка внешних сценариев и таблиц стиля. | ||
+ | - Выполнение сценариев (например, [[JavaScript]]) по мере их разбора в документе. | ||
+ | - Полное построение HTML DOM. | ||
+ | - Загрузка изображений и внешнего контента. | ||
+ | - Завершение загрузки страницы. | ||
+ | |||
+ | <note warning>Сценарии, находящиеся в заголовке <head>, и загружаемые из внешнего файла выполняются до фактического построения HTML DOM. Это является существенной проблемой, поскольку все сценарии в этих двух местах не будут иметь доступа к DOM.</note> | ||
+ | ====== Модификация DOM ====== | ||
+ | Модификация DOM состоит из трех этапов: | ||
+ | - создание нового элемента (createElement, createTextNode) | ||
+ | - вставка в DOM (insertBefore, appendChild). Метод innerHTML служит для непосредственной вставки HTML в документ, соответственно, без использования createElement. | ||
+ | - удаление (removeChild). | ||
+ | ====== Объекты DOM ====== | ||
+ | |||
+ | * [[Object Global]]: свойства и функции верхнего уровня, не ассоциированные с какими-либо объектами (Infinity, NaN, undefined, [[eval]], escape(unescape)). | ||
+ | * [[Object Window]] HTML [[DOM]] - представляет собой текущее окно Веб- браузера. В объекте Window свойство document ссылается на Object Document, свойство location на объект [[http://www.w3schools.com/jsref/obj_location.asp|Location]]. | ||
+ | * [[Object Document]] HTML [[DOM]]: getElementsByTagName, getElementById; innerHTML; write; [[cookie]]. | ||
+ | * [[Object Screen]] - служит для доступа к характеристикам видеосистемы компьютера клиента, например размер экрана пользователя, доступное количестве цветов. | ||
+ | * [[Object Navigator]] - содержит общую информацию о Веб- браузере. | ||
+ | * [[Object Math]]: Анимация объектов страницы. Полярная система координат. | ||
+ | * Объект [[XMLHttpRequest]] - отправляет GET или POST запросы для динамической загрузки данных. | ||
+ | * [[Object String]]: методы indexOf, split, slice, substring, substr. | ||
+ | * [[Object Array]]: массивы | ||
+ | * [[Object Event]]: события и их обработка. addEventListener | ||
+ | * [[Object Image]]: getElementById(). Ролловеры. | ||
+ | * [[Object Date]] | ||
+ | * [[RegExp]] JavaScript: [[Object RegExp]] | ||
+ | * Object Console: отладка в [[Firebug]] | ||
+ | * [[Object Elements]]: получение смежных, дочерних и родительских элементов. | ||
+ | * Object Boolean: значения, которые при приведении к Boolean становятся False: false, null, undefined, “”, 0, Number.NaN все остальные True |