Объектная модель документа, или DOM,
является важной концепцией в веб-разработке. Это важный инструмент для разработчиков, которым необходимо динамически управлять веб-страницами, внося изменения в элементы, содержимое и стиль. В этой статье мы рассмотрим, что такое DOM, как он работает и как его эффективно использовать в JavaScript.
Что такое ДОМ?
Модель DOM похожа на карту веб-страницы, которую JavaScript может использовать для изменения содержимого страницы. Когда вы посещаете веб-сайт, ваш браузер создает карту страницы, которая включает все ее элементы, такие как заголовки, абзацы, изображения и ссылки. Затем JavaScript может получить доступ к этим элементам и управлять ими с помощью DOM.
DOM имеет структуру дерева, в котором документ является корневым узлом, а каждый элемент на странице — дочерним узлом. Например, элемент <body>
является дочерним узлом элемента <html>
, а текст и изображения являются дочерними узлами элементов, которые их содержат.
Доступ к элементам на странице
Он позволяет динамически изменять внешний вид, содержимое и поведение страницы в ответ на действия пользователя или другие события.
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!'); });