Dom что это: Введение — Интерфейсы веб API

Document Object Model (DOM) | ATLEX.Ru

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

По своему формату это модель документа. В рамках этой модели содержимое документа представляется в виде различных объектов, состоящих в определенных отношениях. Каждый вложенный элемент HTML воспринимается как дочерний объект по отношению к тому, который его окружает. Атрибуты HTML превращаются в свойства таких объектов.

Таким образом, DOM служит для адаптации HTML-страницы под нормы объектно-ориентированного программирования, что существенно увеличивает возможности разработчика.

DOM – это модель, которая не зависит от того, где она выполняется и какой язык используется для её реализации.

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

Стандартизация правил и рекомендаций вёрстки, проводимая консорциумом W3C затронула и DOM, теперь это де-факто стандарт в области работы с HTML-элементами.

История применения DOM и его современное состояние

DOM как объектная модель документа возник в 1995 году, во время острой конкурентной борьбы между двумя веб-браузерами – Internet Explorer и Netscape Navigator. Netscape Navigator проиграл, однако сейчас уже и Internet Explorer не столь широко представлен на рынке, как всего ещё пять лет назад.

Во время этой борьбы Document Object Model постепенно изменялась, и к 2005 году произошла почти полная стандартизация DOM компанией W3C, начавшаяся ещё в 1998 году. Современные браузеры поддерживают все основные функции DOM.

Перед тем, как разрабатывать веб-приложение, использующее редкие возможности DOM (например, обращение к объектам с помощью коллекций, в частности — нестандартной коллекции all), лучше будет добавить туда проверку во время загрузки приложения. Эта проверка с помощью специальных скриптов покажет, поддерживает ли браузер все те опции, которые вы собираетесь использовать.

Классификация типов, содержимого и функций DOCUMENT OBJECT MODEL

В рамках стандарта DOM выделяют три вида объектной модели документа:

1. Основная DOM – обычная модель для всех видов документов
2. XML-DOM – адаптированная для XML-документов модель объектного представления
3. HTML-DOM – то же для HTML.

Объектная модель документа выполняет важную задачу по регуляции взаимодействия между HTML-объектами. Для этого она определяет некоторые термины HTML в рамках стандартов ООП:

1. Сами HTML-элементы получают роль объектов
2. Атрибуты HTML-элементов получают роль свойств объектов
3. Регламентируются методы для доступа к объектам
4. Регламентируются события, возникающие при взаимодействии пользователя или веб-программы с объектами.

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

С помощью объектной модели документа программист может наделить своё веб-приложение следующими функциями:

1. JavaScript-приложение сможет добавить на страницу новые HTML-элементы и свойства к ним или к уже существующим объектам.
2. Приложение сможет удалить или изменить уже существующие HTML-элементы или отдельные их свойства.
3. JavaScript-приложение сможет создать новые события при объектах и отслеживать их.
4. После чего оно сможет отреагировать запуском того или иного метода в ответ на произошедшее событие.
5. Веб-приложение также может изменить стиль веб-страницы.

Эта концепция, которая является одной из базовых в объектно-ориентированном программировании, почти ничем не отличается от подобных аналогов в других отраслях IT. В данном конкретном случае под методами подразумеваются те действия, которые можно совершить над объектами (в том числе и с целью получить ту или иную информацию от них), а свойства – это значения атрибутов тех или иных HTML-элементов на странице.

Базовым объектом для DOM является Документ  – это вся веб-страница со всем её содержимым. Этот объект содержит три самых важных метода для поиска элементов:

1. getElementByID. Эта функция принимает на вход параметр ID, обозначающий идентификатор объекта, который требуется найти.
2. getElementsByTagName. Эта функция находит массив объектов определённого типа. На вход она принимает строковое значение тэга, по которому будет производиться фильтрация объектов.
3. getElementsByClassName. Эта функция находит массив объектов определенного класса. Класс элемента, в отличие от тэга, устанавливается создателем веб-страницы, что предоставляет программисту практически неограниченные возможности по классификации объектов.

Кроме функций для поиска, объект Документ (как, впрочем, и все его дочерние объекты) содержит методы и свойства для управления объектами.

1. Свойство innerHTML – позволяет получать и изменять полностью всё содержимое, лежащее между открывающим и закрывающим тегами найденного объекта.
2. setAttribute – эта функция позволяет присвоить некоторому свойству объекта определённое значение. Принимает на вход название свойства и значение.
3. Write – эта функция позволяет записать данные в основной поток (поверх готового документа).
4. Семейство функций Child (а именно, appendChild, replaceChild, removeChild) – позволяет управлять дочерними объектами.
5. Функция CreateElement – создаёт новый HTML-элемент.

Также конкретно объект Документ содержит целый ряд служебных свойств, которые позволяют получить важные данные о веб-странице:

1. Anchors – якоря на странице (ссылки на конкретную часть страницы)
2. Applets – места для дополнительных расширений
3. baseURI – адрес документа
4. body – всё, что написано в теге Body
5. cookie – получает куки документа
6. doctype – получает тип документа
7. head – всё, что написано в служебной части документа
8. forms, images, links, scripts – получает соответственно массивы форм, картинок и ссылок (в том числе визуальных), скриптов.
9. Title – заглавие документа
10. Readystate – состояние готовности документа
11. Inputencoding – кодировка документа

Узлы типа DOMNodelist

Вам нужно помнить, что коллекции всех элементов документа и их дочерних элементов составляют собой особый тип, не являющийся типичным JavaScript-массивом.

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

Представим, что нам необходимо очистить коллекцию. Изначально она выглядит так:

1. Первый элемент
2. Второй элемент
3. Третий элемент
4. Четвёртый элемент

Мы составили простейший скрипт, удаляющий по очереди каждый элемент. Но после его запуска, список выглядит так:

1. Второй элемент
2. Четвёртый элемент

Это произошло потому, что после удаления первого элемента второй элемент сразу же, ещё до окончания цикла, стал первым. А третий, соответственно, вторым, и в рамках того же цикла удалился. На его место тут же встал четвёртый. Понадобится ещё два раза запустить цикл, чтобы удалить действительно все элементы, либо переписать скрипт таким образом, чтобы он удалял первый элемент до тех пор, пока коллекция не опорожнится.

Выводы

Объектная модель документа (DOM) предоставляет программисту целый ряд возможностей, которые очень важны для работы с объектами веб-страницы. Главное — помнить об особенностях данной модели и знать основы объектно-ориентированного программирования.

Модель DOM является важнейшим компонентом современного сайтостроения. Без знания принципов работы DOM невозможно создавать эффективные интерактивные сайты, удобные для пользователя.

А после создания современного сайта со множеством функций, реализованных благодаря следованию стандартам объектной модели документа, крайне важно обеспечить бесперебойный доступ пользователей к нему. Для персональных сайтов или небольших проектов подойдет виртуальный хостинг. Крупные порталы имеет смысл размещать на виртуальных или выделенных серверах. Студиям веб-разработки, предоставляющим весь спектр услуг — от дизайна до хостинга, могут быть интересны реселлерские программы от ATLEX.Ru.

DOM — JavaScript — Дока

1. Кратко
2. Как пишется
   1. Свойства
   2. Методы
3. Как понять
   1. Из чего состоит DOM
4. На практике
   1. Николай Лопин советует

Кратко

Скопировано

DOM (Document Object Model) — это специальная древовидная структура, которая позволяет управлять HTML-разметкой из JavaScript-кода. Управление обычно состоит из добавления и удаления элементов, изменения их стилей и содержимого.

Браузер создаёт DOM при загрузке страницы, складывает его в переменную document и сообщает, что DOM создан, с помощью события DOMContentLoaded. С переменной document начинается любая работа с HTML-разметкой в JavaScript.

Как пишется

Скопировано

Объект document содержит большое количество свойств и методов, которые позволяют работать с HTML. Чаще всего используются методы, позволяющие найти элементы страницы.

Свойства

Скопировано

• title — заголовок документа. Браузер обычно показывает его на вкладке.

Установить свой заголовок можно простым присваиванием:

document.title = 'Мое название документа'console.log(document.title)// Мое название документа
          document.title = 'Мое название документа'
console. log(document.title)
// Мое название документа

• forms — получить список форм на странице. Свойство только для чтения, напрямую перезаписать его нельзя.
• body — получить <body> элемент страницы.
• head — получить <head> элемент страницы.

Методы

Скопировано

• getElementById — поиск элемента по идентификатору;
• getElementsByClassName — поиск элементов по названию класса;
• getElementsByTagName — поиск элементов по названию тега;
• querySelector — поиск первого элемента, подходящего под CSS-селектор;
• querySelectorAll — поиск всех элементов подходящих под CSS-селектор.

Как понять

Скопировано

Браузер создаёт DOM на основе HTML-кода страницы. Затем на основе DOM и других структур, браузер рисует страницу пользователю. При изменении DOM, браузер анализирует это и обновляет страницу.

DOM и страница, которую видит пользователь, связаны. Если изменишь одно, то изменится и второе:

• пользователь заполняет форму — можно прочитать введённые значения в DOM;
• при выборе страны, мы заполняем список городов в DOM — пользователь видит список.

Высокоуровневая схема такого взаимодействия:

Из чего состоит DOM

Скопировано

HTML страница — это теги, вложенные друг в друга. Например:

<!DOCTYPE html><head>  <title>Личный кабинет</title></head><body>  <header>    <ul>      <li>Главная</li>      <li>Статьи</li>      <li>Контакты</li>    </ul>  </header>  <article>    <h2>Как выучить джаваскрипт?</h2>    <p>Нужно начать учиться.</p>  </article></body>
          <!DOCTYPE html>
<head>
  <title>Личный кабинет</title>
</head>
<body>
  <header>
    <ul>
      <li>Главная</li>
      <li>Статьи</li>
      <li>Контакты</li>
    </ul>
  </header>
  <article>
    <h2>Как выучить джаваскрипт?</h2>
    <p>Нужно начать учиться. </p>
  </article>
</body>

Браузер превращает эту разметку в JavaScript представление, сохраняя при этом вложенность и свойства каждого HTML-элемента. Этого удаётся достичь с помощью специальной структуры данных — дерева.

Каждый тег представляет собой узел дерева. У каждого узла могут быть дочерние узлы — таким образом сохраняется информация о вложенности тегов. Правда, слово тег в этом контексте не используют и говорят элемент. Например, HTML-код выше превратится в такое дерево:

Дерево состоит из обычных и текстовых узлов. Обычные узлы — это HTML-теги, а текстовые узлы — текст внутри тегов.

Обычный узел называется Element, и он содержит в себе описание тега, атрибутов тега и обработчиков. Если изменить описание — изменится и HTML-код этого элемента (возможно что-то даже изменится на экране. Например, если поменять цвет шрифта). В статье Element мы разбираем всё необходимое для работы с элементами.

У любого узла есть один родительский узел и дочерние. Родительский узел — элемент, в который вложен текущий узел, он может быть только один. Дочерние — узлы, которые вложены в текущий узел.

Это правило не работает только в двух случаях:

• корневой узел — у такого узла нет родителя;
• текстовый узел — у таких узлов нет дочерних узлов, только родитель. Последний уровень любого DOM-дерева состоит из текстовых узлов.

На практике

Скопировано

Николай Лопин советует

Скопировано

🛠 Напрямую с DOM работают редко. Обычно работают на уровне элементов.

🛠 Из-за своей древовидной структуры искать элементы по DOM можно не только от корня. В диаграмме выше можно найти сначала элемент ul, а затем искать элементы среди его потомков.

let ulElement = document.getElementsByTagName('ul')[0]// среди потомков ul нашли последний lilet lastLi = ulElement.querySelector('li:last-child')lastLi.style.color = 'red'
          let ulElement = document. getElementsByTagName('ul')[0]
// среди потомков ul нашли последний li
let lastLi = ulElement.querySelector('li:last-child')
lastLi.style.color = 'red'

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

Intersection Observer

ctrl + alt + ←

→

Element

ctrl + alt + →

JavaScript HTML DOM

❮ Назад
Далее ❯

С помощью HTML DOM JavaScript может получить доступ ко всем элементам HTML и изменить их.
документ.

HTML DOM (объектная модель документа)

При загрузке веб-страницы браузер создает документ D
O предмет M модель с.

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

Дерево объектов 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).

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

«Объектная модель документа W3C (DOM) не зависит от платформы и языка
интерфейс, который позволяет программам и сценариям динамически получать доступ и обновлять
содержание, структура и стиль документа».

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

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

Что такое HTML DOM?

HTML DOM представляет собой стандартную модель объекта и
интерфейс программирования для HTML. Он определяет:

• Элементы HTML как объекта
• свойства всех элементов HTML
• Методы для доступа ко всем элементам HTML
• событий для всех элементов HTML

Другими словами: HTML DOM — это стандарт получения, изменения, добавления или удаления элементов HTML.

❮ Предыдущий
Далее ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

901 15 лучших примеров

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры How To
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM |
О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.

Авторское право 1999-2023 по данным Refsnes. Все права защищены.
W3Schools работает на основе W3.CSS.

Что такое DOM?

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

Но что означает DOM?

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

Что такое DOM?

DOM — это аббревиатура, обозначающая объектную модель документа. Это то, как веб-браузер представляет веб-страницу внутри.

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

Документ

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

Объект

«Материал» на веб-страницах — это объекты, которые иногда называют элементами или узлами. Вот некоторые объекты, с которыми вы можете столкнуться на веб-странице:

• Контент. Наиболее очевидными объектами на веб-странице являются ее содержимое. Это могут быть слова, видео, изображения и многое другое.
• Конструктивные элементы. К ним относятся элементы div, контейнеры и разделы. Вы можете не видеть эти элементы, но вы видите, как они влияют на видимые элементы, потому что они организуют эти элементы на веб-странице.
• Атрибуты. Каждый элемент на веб-странице имеет атрибуты. К ним относятся, например, классы, стили и размеры. Это объекты в DOM, но они не такие элементы, как контент и структурные элементы.

Модель

Модель — это представление чего-либо, которое помогает нам понять, как что-то устроено. Существуют модели для многих вещей, которые необходимо понимать, анализировать и использовать повсеместно.

Один пример модели, используемой для инструкций. Чертежи, планы этажей и указания ИКЕА — все это примеры такого рода моделей. Они показывают моделируемый объект с достаточной детализацией, чтобы его можно было воссоздать.

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

DOM — это модель для веб-страниц. Он действует как набор инструкций для веб-браузеров.

Как выглядит DOM?

Модель DOM представлена ​​в виде структуры данных, называемой деревом. Каждый объект в DOM иерархически подчинен другому объекту, и любой объект может иметь несколько дочерних объектов, но только одного родителя.

Каждый объект DOM «владеет» своими дочерними элементами. Если вы удалите объект из DOM, все его дочерние элементы также будут удалены вместе с ним.

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

Древовидный граф

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

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

Точно так же корневой узел — узел в верхней части древовидного графа — веб-страницы будет элементом HTML. Ниже у вас будут элементы головы и тела. Под элементом body вы, возможно, найдете элементы заголовка, основного и нижнего колонтитула. Под элементом заголовка вы можете найти элементы img, nav и h2.

HTML

Наиболее распространенный способ представления модели DOM — HTML. Вы можете просмотреть HTML-код веб-страницы, открыв инструменты разработчика в своем браузере или щелкнув элемент правой кнопкой мыши и выбрав «Проверить элемент». Вот пример HTML:

 
<голова>...
<тело>
<заголовок>
 
Пример сайта
<навигация>...

<главное>...
<нижний колонтитул>...

 

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

Элементы HTML заключают в себе другие элементы, которые являются его дочерними элементами. Элемент img является дочерним элементом элемента заголовка, который является дочерним элементом элемента body, который является дочерним элементом элемента HTML.

Несмотря на то, что это наиболее распространенный способ представления DOM, HTML не является самой DOM — он просто представляет ее.

Исходный код

Существует больше способов создать документ, чем с помощью HTML. Вы можете использовать внутренний язык программирования, такой как PHP, для генерации HTML при загрузке веб-страницы. Вы можете использовать JavaScript для динамического изменения элементов веб-страницы. Или вы можете использовать интерфейсную структуру, такую ​​​​как React, для создания полноценных веб-страниц без написания HTML.

Визуализированная веб-страница

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