Объектная модель документа, или DOM,

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

Что такое ДОМ?

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

DOM имеет структуру дерева, в котором документ является корневым узлом, а каждый элемент на странице — дочерним узлом. Например, элемент <body> является дочерним узлом элемента <html>, а текст и изображения являются дочерними узлами элементов, которые их содержат.

Доступ к элементам на странице

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

  1. getElementById(): вы можете выбрать элемент по его уникальному идентификатору. Это полезно, когда вы точно знаете, какой элемент вы хотите изменить.
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Accessing Elements on a Page with JavaScript</title>
</head>

<body>
    <h1 id="heading">Welcome to my website!</h1>
    <p class="description">Here's some information about me.</p>
    <p class="description">And here's some more information.</p>
    <script src="myScript.js"></script>
</body>

</html>

const heading = document.getElementById('heading');
heading.textContent = 'Hello, world!';

2. querySelector():Еще один способ выбора элементов — использование селекторов в стиле CSS. Этот метод позволяет выбирать элементы на основе имени их тега, имени класса, идентификатора или других атрибутов. Он возвращает первый соответствующий элемент, найденный на странице.

const description = document.querySelector('.description');
description.style.color = 'red';

3. getElementsByClassName(): если вы хотите выбрать несколько элементов на основе имени их класса, вы можете использовать getElementsByClassName(). Этот метод возвращает все элементы с тем же именем класса, что и HTMLCollection, которые затем можно изменить все сразу.

const descriptions = document.getElementsByClassName('description');
for (let i = 0; i < descriptions.length; i++) {
  descriptions[i].style.fontSize = '30px';
}

4. getElementsByTagName(): Точно так же он позволяет выбирать несколько элементов на основе имени их тега.

const paragraphs = document.getElementsByTagName('p');
for (let i = 0; i < paragraphs.length; i++) {
    paragraphs[i].style.fontFamily = 'Lucida Console';
}

Управление элементами на странице

Когда у вас есть ссылка на элемент, вы можете манипулировать им. Существуют различные свойства и методы для изменения элементов, например textContent, innerHTML и style. Например, вы можете изменить текстовое содержимое элемента абзаца, используя свойство textContent, или вы можете изменить его стиль, используя свойство style. Используя эти свойства и методы, разработчики могут изменять внешний вид, содержимое и поведение элементов на странице.

Вот пример использования свойства style для изменения цвета фона элемента абзаца:

стиль:

myParagraph.style.backgroundColor = '#75a99c';

внутреннийHTML:

<div id="my-div"></div>
const myDiv = document.getElementById('my-div');
myDiv.innerHTML = '<h2>Hello, World!</h2>';

Добавление и удаление элементов со страницы

Вы можете добавлять новые элементы на страницу с помощью метода createElement(), задавать их свойства, а затем добавлять их на страницу с помощью метода appendChild().

<body>
 <div class="box" id="box1">Box 1</div>
 <div class="box" id="box2">Box 2</div>
 <button id="btn-add">Add Box</button>
 <script src="myScript.js"></script>
</body>
const addButton = document.getElementById('btn-add');
addButton.addEventListener('click', () => {
 const newBox = document.createElement('div');
 newBox.classList.add('box', 'red');
 newBox.textContent = 'New Box';
 document.body.appendChild(newBox);
});

И наоборот, элементы могут быть удалены со страницы с помощью метода remove() или путем удаления родительского узла с помощью метода removeChild().

<button id="btn-remove">Remove Box</button>
const removeButton = document.getElementById('btn-remove');
const box2 = document.getElementById('box2');
removeButton.addEventListener('click', () => {
 box2.remove();
});

Обработка событий

Обработка событий — еще один важный аспект DOM. Разработчики могут добавлять прослушиватели событий к элементам с помощью метода addEventListener(). Это позволяет им реагировать на вводимые пользователем данные, такие как щелчки или нажатия на клавиатуру, и выполнять действия в ответ. Общие события включают щелчок, наведение мыши и отправку.

Вот пример использования addEventListener() для обработки события нажатия кнопки:

<button id="my-button">Click me!</button>
const myButton = document.getElementById('my-button');
myButton.addEventListener('click', () => {
  alert('Button clicked!');
});