Различия

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

--- 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

АйТи бубен

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

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

Различия

Инструменты страницы