Кратко
СкопированоDOM (Document Object Model) — это специальная древовидная структура, которая позволяет управлять HTML-разметкой из JavaScript-кода. Управление обычно состоит из добавления и удаления элементов, изменения их стилей и содержимого.
Браузер создаёт DOM при загрузке страницы, складывает его в переменную document и сообщает, что DOM создан, с помощью события DOM. С переменной document начинается любая работа с HTML-разметкой в JavaScript.
Как пишется
СкопированоОбъект document содержит большое количество свойств и методов, которые позволяют работать с HTML. Чаще всего используются методы, позволяющие найти элементы страницы.
Свойства
Скопированоtitle— заголовок документа. Браузер обычно показывает его на вкладке.
Установить свой заголовок можно простым присваиванием:
document.title = 'Мое название документа'console.log(document.title)// Мое название документа
document.title = 'Мое название документа'
console.log(document.title)
// Мое название документа
forms— получить список форм на странице. Свойство только для чтения, напрямую перезаписать его нельзя.body— получить<body>элемент страницы.head— получить<head>элемент страницы.
Методы
Скопированоget— поиск элемента по идентификатору;Element By Id get— поиск элементов по названию класса;Elements By Class Name get— поиск элементов по названию тега;Elements By Tag Name query— поиск первого элемента, подходящего под CSS-селектор;Selector query— поиск всех элементов подходящих под CSS-селектор.Selector All
Как понять
СкопированоБраузер создаёт DOM на основе HTML-кода страницы. Затем на основе DOM и других структур, браузер рисует страницу пользователю. При изменении DOM, браузер анализирует это и обновляет страницу.
DOM и страница, которую видит пользователь, связаны. Если изменишь одно, то изменится и второе:
- пользователь заполняет форму — можно прочитать введённые значения в DOM;
- при выборе страны, мы заполняем список городов в DOM — пользователь видит список.
Высокоуровневая схема такого взаимодействия:
Из чего состоит 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-теги, а текстовые узлы — текст внутри тегов.
Обычный узел называется 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'