Что такое DOM-дерево и как оно используется в JavaScript 🌳

21 апреля 2023

Razilator

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

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

Существует множество методов DOM для работы с элементами веб-страницы. Некоторые из наиболее часто используемых методов DOM включают в себя:

getElementById(id): возвращает элемент страницы с указанным id.
getElementsByClassName(class): возвращает массив элементов страницы с указанным классом.
getElementsByTagName(tag): возвращает массив элементов страницы с указанным тегом.
querySelector(selector): возвращает первый элемент страницы, соответствующий указанному CSS-селектору.
querySelectorAll(selector): возвращает массив всех элементов страницы, соответствующих указанному CSS-селектору.
createElement(tagName): создает новый элемент с указанным тегом.
createTextNode(text): создает новый текстовый узел с указанным содержимым.
appendChild(node): добавляет указанный узел в качестве дочернего элемента другого узла.
removeChild(node): удаляет указанный дочерний элемент из родительского узла.

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

Пример взаимодействия с DOM

index.js

document.title = 'Тестовое название'
console.log(document.title)
// Тестовое название

С помощью данного взаимодействия мы можем переопределить заголовок страницы с помощью JS.

Ещё один пример с методом:

index.html

<!DOCTYPE html>
<html>
<head>
	<title>getElementById() Example</title>
</head>
<body>
	<h1 id="heading">Hello, World!</h1>
	<script>
		// получаем элемент по идентификатору
		const heading = document.getElementById("heading");
		
		// меняем текст элемента
		heading.textContent = "Hello, JavaScript!";
	</script>
</body>
</html>

getElementById(): метод возвращает элемент с указанным идентификатором, представленным в виде строки. Если элемент с таким идентификатором не найден, метод вернет null.

Из чего состоит DOM дерево

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

Пример обычной HTML-страницы может выглядеть следующим образом:

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок страницы</title>
  </head>
  <body>
    <h1>Заголовок первого уровня</h1>
    <p>Это абзац текста.</p>
    <ul>
      <li>Элемент списка 1</li>
      <li>Элемент списка 2</li>
      <li>Элемент списка 3</li>
    </ul>
  </body>
</html>

В этом примере <!DOCTYPE html> является корневым элементом дерева, за которым следуют html, head и body. head содержит элемент title, который определяет заголовок страницы. body содержит элементы h1, p и ul. Элемент ul содержит три элемента li, которые представляют собой элементы списка. Каждый из этих элементов является узлом в DOM дереве.

Значение каждого узла DOM может быть изменено с помощью JavaScript. Например, чтобы изменить текст элемента h1 на "Новый заголовок первого уровня", можно использовать следующий код:

index.js

document.querySelector('h1').textContent = 'Новый заголовок первого уровня';

Этот код найдет элемент h1 в DOM дереве и изменит его содержимое на "Новый заголовок первого уровня".

Заключение

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