Различия

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


Предыдущая версия
—dom [2025/07/06 12:38] (текущий) – внешнее изменение 127.0.0.1
Строка 1: Строка 1:
 +====== Что такое DOM (Document Object Model) ======
 +~~Title: DOM: Объектная Модель Документа - JavaScript и HTML ~~
 +{{htmlmetatags>
 +metatag-description=(DOM (Document Object Model) - это объектная модель для представления XML и HTML документов. Узнайте, как DOM позволяет JavaScript взаимодействовать с элементами веб-страницы, изменять их структуру и содержимое.)
 +}}
  
 +**DOM** (Document Object Model) - объектная модель, используемая для представления [[XML|XML]]- документов. DOM модель не зависит ни от платформы ни от языка, поэтому для доступа к информации DOM и ее изменения могут использоваться различные языки программирования, например [[JavaScript|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

📌 Удобный подбор VPS по параметрам доступен на DIEGfinder.com - официальном инструменте проекта DIEG. Это часть единой экосистемы, созданной для того, чтобы помочь быстро найти подходящий VPS/VDS сервер для любых задач хостинга.

📌 Для тестирования скриптов, установщиков VPN и Python-ботов рекомендуем использовать надежные VPS на короткий срок. Подробнее о быстрой аренде VPS для экспериментов - читайте здесь.

💥 Подпишись в Телеграм 💥 и задай вопрос по сайтам и хостингам бесплатно!

7 Самых Популярных Статей

  1. Как запустить скрипты и веб-приложения на Python
  2. Что такое страны TIER 1,2,3
  3. 7 способов сравнения файлов по содержимому в Windows или Linux
  4. Установка и тестирование веб-панели HestiaCP
  5. Nginx простые примеры конфигурации
  6. top, htop, atop определение загрузки ОС (Load average, LA)
  7. Использование rsync в примерах

7 Самых Популярных Обзоров

  1. Хостинг для Python-скриптов и приложений
  2. ТОП 4 лучших антидетект браузеров (Бесплатные & Платные)
  3. Подборка купонов (промокоды) на хостинг, антидетект браузеры
  4. Обзор THE.Hosting (PQ Hosting): надежный хостинг с профессиональной поддержкой
  5. Хостинг в России
  6. Хостинг в Европе
  7. Обзор браузера Dolphin {anty} для мультиаккаунтинга