Что такое DOM-дерево и как оно используется в JavaScript 🌳
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
document.title = 'Тестовое название'
console.log(document.title)
// Тестовое название
С помощью данного взаимодействия мы можем переопределить заголовок страницы с помощью JS.
Ещё один пример с методом:
<!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-страницы может выглядеть следующим образом:
<!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
на "Новый заголовок первого уровня", можно использовать следующий код:
document.querySelector('h1').textContent = 'Новый заголовок первого уровня';
Этот код найдет элемент h1
в DOM дереве и изменит его содержимое на "Новый заголовок первого уровня".
Заключение
Методы DOM являются мощным инструментом для манипулирования элементами HTML-документа. Они позволяют получать элементы по идентификатору, классу и тегу, создавать новые элементы, добавлять и удалять элементы, а также устанавливать и получать значения атрибутов элементов.