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

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


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 (внешнее изменение)