Что такое dom в javascript: Document Object Model (объектная модель документа) / Хабр

Введение в DOM в JavaScript

Введение в DOM

Последнее обновление: 1.11.2015

Одой из ключевых задач JavaScript является взаимодействие с пользователем и манипуляция элементами веб-страницы. Для JavaScript веб-страница доступна в виде объектной модели документа (document object model) или сокращенно DOM. DOM описывает структуру веб-станицы в виде древовидного представления и предоставляет разработчикам способ получить доступ к отдельным элементам веб-станицы.

Важно не путать понятия BOM (Browser Object Model — объектная модель браузера) и DOM (объектная модель документа). Если BOM предоставляет доступ к браузеру и его свойствам в целом, то DOM предоставляет доступ к отдельной веб-странице или html-документу и его элементам.

Например, рассмотрим простейшую страницу:


<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>
</head>
<body>
	<h3>Page Header</h3>
	<div>
		<h4>Block Header</h4>
		<p>Text</p>
	</div>
</body>
</html>

Дерево DOM для этой страницы будет выглядеть следующим образом:

Таким образом, все компоненты упорядочены в DOM иерархическим образом, где каждый компонент представляет отдельный узел. То есть каждый элемент, например, элемент div, представляет собой узел. Но также и текст внутри элемента представляет отдельный узел.

Существует следующие виды узлов:

  • Element: html-элемент

  • Attr: атрибут html-элемента

  • Document: корневой узел html-документа

  • DocumentType: DTD или тип схемы XML-документа

  • DocumentFragment: место для временного хранения частей документа

  • EntityReference: ссылка на сущность XML-документа

  • ProcessingInstruction: инструкция обработки веб-страницы

  • Comment: элемент комментария

  • Text: текст элемента

  • CDATASection: секция CDATA в документе XML

  • Entity: необработанная сущность DTD

  • Notation: нотация, объявленная в DTD

Несмотря на такое большое количество типов узлов, как правило, мы будем работать только с некоторыми из них.

JavaScript справочник: объекты, DOM, BOM

Справочник объектов JavaScript

Справочник содержит описание всех свойств и методов стандартных встроенных объектов JavaScript.

Объектная модель документа

Объектная модель документа (Document Object Model, DOM) – это интерфейс программирования приложений (Application Programming Interface, API) для XML, который был расширен также для работы с HTML.

В DOM всё содержимое страницы (элементы и текст) представляется как иерархия узлов. Рассмотрим следующий код:


<html>
  <head>
    <title>Простая страница</title>
  </head>
  <body>
    <p>Привет Мир!</p>
  </body>
</html>

Этот код можно изобразить с помощью DOM как иерархию узлов:

Представляя документ в виде дерева узлов, DOM API предоставляет разработчикам полный контроль над содержимым и структурой веб-страницы.

При описании древовидной структуры DOM используется терминология, которая была заимствована у генеалогических деревьев.

Так, узел, расположенный непосредственно над данным узлом, называется родительским по отношению к данному узлу. Узлы, расположенные на один уровень ниже данного узла, называются дочерними по отношению к данному узлу. Узлы, находящиеся на одном уровне и имеющие одного и того же родителя, называются сестринскими или братьями. Узлы, расположенные на любое число уровней ниже данного узла, называются его потомками. Родительские, прародительские и любые другие узлы, расположенные на любое число уровней выше данного узла, называются его предками.

Справочник по DOM содержит описание объектов Document, Element, Event и NodeList, включая описание их методов и свойств:

Справочник BOM

BOM (Browser Object Model в переводе с анг. — Объектная Модель Браузера) обеспечивает доступ к окну браузера и позволяет манипулировать им и его элементами.

BOM-объекты обеспечивают доступ к функционалу браузера независимо от контента веб-страницы. Тема BOM интересна и одновременно сложна, потому что из-за длительного отсутствия спецификации производители браузеров свободно расширяли BOM по своему усмотрению. Многие элементы, схожие в разных браузерах, стали стандартами де-факто, которые соблюдаются и по сей день из соображений взаимной совместимости. Чтобы стандартизировать эти фундаментальные аспекты JavaScript, консорциум W3C определил основные BOM-элементы в спецификации HTML5.

Справочник содержит описание всех свойств и методов каждого из объектов:

JS HTML DOM

Благодаря HTML DOM программы на JavaScript могут получить доступ и изменять все элементы HTML документа.

HTML DOM (Document Object Model)

После загрузки веб-страницы браузер создает Объектную модель документа (анг. Document Object Model) этой страницы.

Модель HTML DOM создается в виде дерева объектов:

Благодаря этой объектной модели JavaScript получает всю мощь, необходимую для создания динамического HTML:

  • JavaScript может изменять все HTML элементы на странице
  • JavaScript может изменять все HTML атрибуты на странице
  • JavaScript может изменять все CSS стили на странице
  • JavaScript может удалять существующие HTML элементы и атрибуты
  • JavaScript может добавлять новые HTML элементы и атрибуты
  • JavaScript может реагировать на все существующие HTML события на странице
  • JavaScript может создавать новые HTML события на странице

Что вы изучите

В следующих главах этого учебника вы изучите:

  • Как изменять содержимое элементов HTML
  • Как изменять стиль (CSS) элементов HTML
  • Как реагировать на события HTML DOM
  • Как добавлять и удалять элементы HTML

Что такое DOM?

DOM — это официальный стандарт консорциума W3C (World Wide Web Consortium).

DOM определяет стандарт для доступа к документам:

«W3C объектная модель документа (DOM) (от англ. Document Object Model) — это независящий от платформы и языка программный интерфейс, позволяющий программам и скриптам динамически получить доступ к содержимому документов, а также изменять их содержимое, структуру и оформление.»

Стандарт W3C DOM разделен на 3 разные части:

  • Core DOM – стандартная модель для всех типов документов
  • XML DOM – стандартная модель для XML документов
  • HTML DOM – стандартная модель для HTML документов

Что такое HTML DOM?

JavaScript DOM Методы | Schoolsw3.com



Методы HTML DOM — это действия, которые вы можете выполнять (над элементами HTML).

Свойства HTML DOM — это значения (элементов HTML), которые можно задать или изменить.


Программный интерфейс DOM

Доступ к HTML DOM можно получить с помощью JavaScript (и других языков программирования).

В DOM все HTML — элементы определяются как объекты.

Интерфейс программирования-это свойства и методы каждого объекта.

Свойство — это значение, которое можно получить или задать (например, изменить содержимое HTML элемента).

Метод — это действие, которое вы можете выполнить (например, добавить или удалить элемент HTML).


Пример

В следующем примере изменяется содержимое (innerHTML) элемента <p> с идентификатором id="demo":

Пример

<p></p>

<script>
document.getElementById(«demo»).innerHTML = «Привет мир!»;
</script>

</body>
</html>

Попробуйте сами »

В приведенном выше примере getElementById является методом, а innerHTMLсвойством.


Метод getElementById

Наиболее распространенным способом доступа к элементу HTML является использование идентификатора элемента

id.

В приведенном выше примере метод getElementById используется id="demo" для поиска элемента.


Свойство innerHTML

Самый простой способ получить содержимое элемента — использовать свойство innerHTML.

Свойство innerHTML полезно для получения или замены содержимого HTML элементов.

Свойство innerHTML можно использовать для получения или изменения любого HTML элемента, включая <html> и <body>.


JavaScript DOM Документ | Schoolsw3.com



HTML DOM объект document, является владельцем всех других объектов на вашей веб странице.


HTML DOM объект document

Объект document представляет вашу веб страницу.

Если вы хотите получить доступ к любому элементу HTML страницы, вы всегда начинаете с доступа к объекту документа.

Ниже приведены некоторые примеры использования объекта document для доступа к HTML и управления им.


Обнаружение HTML элементов

Метод Описание
document.getElementById(id) Найти элемент по идентификатору элемента
document.getElementsByTagName(name) Поиск элементов по имени тега
document.getElementsByClassName(name) Поиск элементов по имени класса

Изменение HTML элементов

Свойство Описание
element.innerHTML =  new html content Изменение innerHTML элемента
element.attribute = new value Изменение значения атрибута HTML элемента
element.style.property = new style Изменение стиля HTML элемента
Метод Описание
element.setAttribute(attribute, value) Изменение значения атрибута HTML элемента

Добавление и удаление элементов

Метод Описание
document.createElement(element) Создание HTML элемента
document.removeChild(element) Удаление HTML элемента
document.appendChild(element) Добавление HTML элемента
document.replaceChild(new, old) Замена HTML элемента
document.write(text) Запись в поток вывода HTML


Добавление обработчиков событий

Метод Описание
document.getElementById(id).onclick = function(){code} Добавление кода обработчика событий к событию onclick

Обнаружение объектов HTML

Первый HTML DOM Level 1 (1998), определил 11 объектов HTML, коллекции объектов и свойства. Они все еще действительны в HTML5.

Позже, в HTML DOM Level 3, были добавлены дополнительные объекты, коллекции и свойства.

Свойство Описание DOM
document.anchors Возвращает все элементы <a>, имеющие атрибут name 1
document.applets Возвращает все элементы <applet> (устаревшие в HTML5) 1
document.baseURI Возвращает абсолютный базовый URI документа 3
document.body Возвращает элемент <body> 1
document.cookie Возвращает файл cookie документа 1
document.doctype Возвращает тип документа doctype 3
document.documentElement Возвращает элемент <html> 3
document.documentMode Возвращает режим, используемый браузером 3
document.documentURI Возвращает URI документа 3
document.domain Возвращает доменное имя сервера документов 1
document.domConfig Устарелый. Возвращает конфигурацию DOM 3
document.embeds Возвращает все элементы <embed> 3
document.forms Возвращает все элементы <form> 1
document.head Возвращает элемент <head> 3
document.images Возвращает все элементы <img> 1
document.implementation Возвращает реализацию DOM 3
document.inputEncoding Возвращает кодировку документа (набор символов) 3
document.lastModified Возвращает дату и время обновления документа 3
document.links Возвращает все элементы <area> и <a>, имеющие атрибут href 1
document.readyState Возвращает статус (загрузки) документа 3
document.referrer Возвращает URI ссылающегося документа (документ ссылки) 1
document.scripts Возвращает все элементы <script> 3
document.strictErrorChecking Возвращает ошибку, если проверка осуществляется 3
document.title Возвращает элемент <title> 1
document.URL Возвращает полный URL адрес документа 1

Что такое Virtual DOM? / Хабр

За последний год я много слышал о Virtual DOM и React JS.
React работает действительно быстро и очень прост, но как он работает? Что такое Virtual DOM? Почему я должен беспокоиться об этом, и что случилось со старым добрым обычным DOM?
Что такое DOM

Перед тем, как мы начнем вникать в то, что из себя представляет DOM виртуальный, давайте немного поговорим о том, чем является DOM реальный.

DOM (аббревиатура от Document Object Model) — способ представления структурного документа с помощью объектов. Это кроссплатформенное и языко-независимое соглашение для представления и взаимодействия с данными в HTML, XML и т.д.

Веб-браузеры обрабатывают составляющие DOM, и мы можем взаимодействовать с ними, используя JavaScript и CSS. Мы можем работать с узлами документа, изменять их данные, удалять и вставлять новые узлы. В наши дни DOM API является практически кроссплатформенным и кроссбраузерным.
Так в чем же проблема?

Проблема DOM

Главная проблема DOM — он никогда не был рассчитан для создания динамического пользовательского интерфейса (UI). Мы можем работать с ним, используя JavaScript и библиотеки наподобие jQuery, но их использование не решает проблем с производительностью.
Посмотрите на современные социальные сети, такие как Twitter, Facebook или Pinterest.
После небольшого скроллинга, мы будем иметь десятки тысяч DOM-узлов, эффективно взаимодействовать с которыми — задача не из легких.

Для примера, попробуйте переместить 1000 div-блоков на 5 пикселей влево.
Это может занять больше секунды — это слишком много для современного интернета. Вы можете оптимизировать скрипт и использовать некоторые приемы, но в итоге это вызовет лишь головную боль при работе с огромными страницами и динамическим UI.

Можем ли мы решить эту проблему? Похоже, что можем.
В настоящее время W3C работает над новым стандартом Shadow DOM.
Shadow DOM — это рабочий черновик стандарта W3C. Спецификация, описывающая метод объединения нескольких DOM-деревьев в одну иерархию и как эти деревья взаимодействуют друг с другом в пределах документа, что позволяет лучше скомпоновать DOM.

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

Virtual DOM

Вместо того, чтобы взаимодействовать с DOM напрямую, мы работаем с его легковесной копией. Мы можем вносить изменения в копию, исходя из наших потребностей, а после этого применять изменения к реальному DOM.
При этом происходит сравнение DOM-дерева с его виртуальной копией, определяется разница и запускается перерисовка того, что было изменено.

Такой подход работает быстрее, потому как не включает в себя все тяжеловесные части реального DOM.
Но только если мы делаем это правильно. Есть две проблемы: когда именно делать повторную перерисовку DOM и как это сделать эффективно.

Когда?
Когда данные изменяются и нуждается в обновлении.
Есть два варианта узнать, что данные изменились:

  • Первый из них — «dirty checking» (грязная проверка) заключается в том, чтобы опрашивать данные через регулярные промежутки времени и рекурсивно проверять все значения в структуре данных.
  • Второй вариант — «observable» (наблюдаемый) заключается в наблюдении за изменением состояния. Если ничего не изменилось, мы ничего не делаем. Если изменилось, мы точно знаем, что нужно обновить.

Как?
Что делает этот подход действительно быстрым:
  • Эффективные алгоритмы сравнения
  • Группировка операций чтения/записи при работе с DOM
  • Эффективное обновление только под-деревьев

Как вы понимаете, это не так просто и реализация может оказаться довольно сложной, но есть некоторые библиотеки, которые помогают реализовать этот подход в наших проектах.
Одной из таких самых известных библиотек является React от команды разработчиков Facebook.
React JS

React JS — это JavaScript-библиотека, разработанная в Facebook для создания пользовательских интерфейсов, которая популяризировала идею использования виртуального DOM. React создает легковесное дерево из JavaScript-объектов для имитации DOM-дерева. Затем он создает из них HTML, который вставляется или добавляется к нужному DOM-элементу, что вызывает перерисовку страницы в браузере.
React — это библиотека, а не фреймворк, поэтому сравнивать его с Angular или Ember некорректно.
Другие библиотеки и фреймворки

  • virtual-dom — реализация Virtual DOM от Matt Esch, алгоритм сравнения отличий.
  • Mithril — Javascript-фреймворк для создания ярких приложений.
  • Bobril — Компонент-ориентированный фреймворк, вдохновленный подходами Mithril и ReactJs.
  • cito.js — JavaScript-фреймворк для создания быстрых, масштабируемых и модульных веб-приложений.
Вывод

Virtual DOM — это техника и набор библиотек / алгоритмов, которые позволяют нам улучшить производительность на клиентской стороне, избегая прямой работы с DOM путем работы с легким JavaScript-объектом, имитирующем DOM-дерево.

Идея с использованием виртуального DOM отличная, хотя и не нова — мы давно знали, что прямая работа с DOM обходится дорого. Используя библиотеки наподобие React, мы можем повысить производительность приложений и сделать это очень просто.

От переводчика

Оригинальная статья: What is Virtual DOM
Примечание: при переводе допущены некоторые вольности, но в рамках разумного.Учебное пособие по

JavaScript DOM с примером

  • Home
  • Testing

      • Back
      • Agile Testing
      • BugZilla
      • Cucumber
      • Database Testing
          • JTL Testing
          • JUnit
          • LoadRunner
          • Ручное тестирование
          • Мобильное тестирование
          • Mantis
          • Почтальон
          • QTP
          • Назад
          • Центр качества (ALM)
          • RPA 9000 Testing SAPI
          • Управление
          • TestLink
      • SAP

          • Назад
          • ABAP 9000 4
          • APO
          • Начинающий
          • Basis
          • BODS
          • BI
          • BPC
          • CO
          • Назад
          • CRM
          • Crystal Reports
          • FICO
          • 000
          • 000 HRM
          • 000
          • 000 HRM Заработная плата
          • Назад
          • PI / PO
          • PP
          • SD
          • SAPUI5
          • Безопасность
          • Менеджер решений
          • Successfactors
          • Учебники SAP

            • Apache
            • AngularJS
            • ASP.Net
            • C
            • C #
            • C ++
            • CodeIgniter
            • СУБД
            • JavaScript
            • Назад
            • Java
            • JSP
            • Kotlin
            • Linux
            • Linux
            • Kotlin
            • Linux
            • js
            • Perl
            • Назад
            • PHP
            • PL / SQL
            • PostgreSQL
            • Python
            • ReactJS
            • Ruby & Rails
            • Scala
            • SQL
            • 000
            • SQL
            • 000 0003 SQL 000 0003 SQL 000
            • UML
            • VB.Net
            • VBScript
            • Веб-службы
            • WPF
        • Обязательно учите!

            • Назад
            • Бухгалтерский учет
            • Алгоритмы
            • Android
            • Блокчейн
            • Business Analyst
            • Создание веб-сайта
            • CCNA
            • Облачные вычисления
            • COBOL
            • 9000 Compiler 9000

              JavaScript DOM, документ


              Объект документа HTML DOM является владельцем всех других объектов на вашей веб-странице.


              Объект документа HTML DOM

              Объект документа представляет вашу веб-страницу.

              Если вы хотите получить доступ к любому элементу на странице HTML, вы всегда начинаете с доступа к объект документа.

              Ниже приведены несколько примеров использования объекта документа для доступа и манипулировать HTML.


              Поиск элементов HTML

              Метод Описание
              документ.getElementById ( идентификатор ) Найти элемент по идентификатору элемента
              document.getElementsByTagName ( имя ) Поиск элементов по имени тега
              document.getElementsByClassName ( имя ) Найти элементы по имени класса

              Изменение элементов HTML

              Объект Описание
              элемент .innerHTML = новый HTML-контент Изменить внутренний HTML-код элемента
              элемент . Атрибут = новое значение Изменить значение атрибута элемента HTML
              элемент . Стиль. property = новый стиль Изменить стиль элемента HTML
              Метод Описание
              элемент .setAttribute (атрибут, значение) Изменить значение атрибута элемента HTML

              Добавление и удаление элементов

              Метод Описание
              document.createElement ( элемент ) Создать элемент HTML
              document.removeChild ( элемент ) Удалить элемент HTML
              документ.appendChild ( элемент ) Добавить элемент HTML
              document.replaceChild ( новый, старый ) Заменить элемент HTML
              документ. Запись ( текст ) Запись в выходной поток HTML


              Добавление обработчиков событий

              Метод Описание
              документ.getElementById ( id ) .onclick = function () { code } Добавление кода обработчика события в событие onclick

              Поиск объектов HTML

              Первая модель HTML DOM Level 1 (1998 г.), определяющая 11 объектов HTML, коллекций объектов и свойств. Они все еще действительны в HTML5.

              Позже, в HTML DOM Level 3 было добавлено больше объектов, коллекций и свойств.

              Объект Описание ДОМ
              документ.якоря Возвращает все элементы , у которых есть атрибут имени 1
              апплеты для документов Возвращает все элементы (устарело в HTML5) 1
              document.baseURI Возвращает абсолютный базовый URI документа 3
              документ. Тело Возвращает элемент 1
              документ.печенье Возвращает файл cookie документа 1
              document.doctype Возвращает doctype документа 3
              document.documentElement Возвращает элемент 3
              документ. Документ Режим Возвращает режим, используемый браузером 3
              документ.документURI Возвращает URI документа 3
              домен документа Возвращает доменное имя сервера документов 1
              document.domConfig Устарело. Возвращает конфигурацию DOM 3
              документ. Закладные Возвращает все элементы 3
              документ.формы Возвращает все элементы
              1
              заголовок документа Возвращает элемент 3
              документ. Изображения Возвращает все элементы 1
              документ. Реализация Возвращает реализацию DOM 3
              документ.inputEncoding Возвращает кодировку документа (набор символов) 3
              document.lastModified Возвращает дату и время обновления документа 3
              document.links Возвращает все элементы и с атрибутом href 1
              document.readyState Возвращает статус (загрузки) документа 3
              документ.реферер Возвращает URI реферера (связывающего документа) 1
              скрипты документа Возвращает все элементы
              Theme: Overlay by Kaira Extra Text
              Cape Town, South Africa