/ ↲
    Расширенный поиск

    JavaScript

    DOM

    На чём стоят три слона, на которых держится веб?

    Время чтения: меньше 5 мин

    Кратко

    Скопировано

    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, JavaScript, страница браузера

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

    Скопировано

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

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

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

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

    HTML-дерево

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

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

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

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

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

    На практике

    Скопировано

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

    Скопировано

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

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

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

lastLi.style.color = 'red'

    Читайте также