Инструменты пользователя
dom
Различия
Здесь показаны различия между двумя версиями данной страницы.
| — |
dom [2015/04/24 08: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 | ||
загрузка...
dom.txt · Последние изменения: 2015/04/24 08:07 (внешнее изменение)
Инструменты страницы
Если не указано иное, содержимое этой вики предоставляется на условиях следующей лицензии: GNU Free Documentation License 1.3
