Инструменты пользователя

Инструменты сайта


dom

Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

dom [2015/04/24 11:07]
dom [2020/06/13 13:45] (текущий)
Строка 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