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

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


dom

DOM

DOM (Document Object Model) - объектная модель, используемая для представления XML- документов. DOM модель не зависит ни от платформы ни от языка, поэтому для доступа к информации DOM и ее изменения могут использоваться различные языки программирования, например JavaScript.

Согласно DOM- модели, документ является иерархией. Каждый HTML- тег образует отдельный элемент-узел, каждый фрагмент текста - текстовый элемент, и т.п. DOM - это представление документа в виде дерева тегов. Это дерево образуется за счет вложенной структуры тегов плюс текстовые фрагменты страницы, каждый из которых образует отдельный узел.

  • Простейший DOM:

Построим, дерево DOM для следующего документа.

<html>
  <head>
    <title>Заголовок</title>
  </head>
  <body>
     hello
   </body>
</html>

Самый внешний тег - <html>, поэтому дерево начинает расти от него. Внутри <html> находятся два узла: <head> и <body> - они становятся дочерними узлами для <html>. Теги образуют узлы-элементы (element node). Текст представлен текстовыми узлами (text node). И то и другое - равноправные узлы дерева DOM.

Загрузка HTML DOM

  • Загрузка HTML DOM. Последовательность операций в браузере при загрузке Web страницы:
    1. Синтаксический анализ HTML.
    2. Загрузка внешних сценариев и таблиц стиля.
    3. Выполнение сценариев (например, JavaScript) по мере их разбора в документе.
    4. Полное построение HTML DOM.
    5. Загрузка изображений и внешнего контента.
    6. Завершение загрузки страницы.
Сценарии, находящиеся в заголовке <head>, и загружаемые из внешнего файла выполняются до фактического построения HTML DOM. Это является существенной проблемой, поскольку все сценарии в этих двух местах не будут иметь доступа к DOM.

Модификация DOM

Модификация DOM состоит из трех этапов:

  1. создание нового элемента (createElement, createTextNode)
  2. вставка в DOM (insertBefore, appendChild). Метод innerHTML служит для непосредственной вставки HTML в документ, соответственно, без использования createElement.
  3. удаление (removeChild).

Объекты DOM

  • Object Global: свойства и функции верхнего уровня, не ассоциированные с какими-либо объектами (Infinity, NaN, undefined, eval, escape(unescape)).
  • Object Window HTML DOM - представляет собой текущее окно Веб- браузера. В объекте Window свойство document ссылается на Object Document, свойство location на объект 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: массивы
  • События: события и их обработка. addEventListener
  • Object Image: getElementById(). Ролловеры.
  • 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 (внешнее изменение)

Яндекс.Метрика