Введение
JavaScript – это язык программирования, который используется для создания интерактивных веб-страниц. Одной из ключевых возможностей этого языка является работа с Document Object Model (DOM) – моделью документа, которая представляет собой структурное представление HTML-документа.
Что такое DOM?
DOM – это программная модель, представляющая структуру HTML-документа в виде дерева объектов. Каждый элемент страницы (например, тег <div>, <p> или <a>) представлен как узел дерева. С помощью DOM можно манипулировать этими узлами: добавлять новые элементы, изменять их свойства, удалять существующие узлы и т.д.
Вот пример простого HTML-документа:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Пример</title> </head> <body> <h1>Заголовок</h1> <p id="paragraph">Это параграф.</p> <button onclick="changeText()">Изменить текст</button> <script> function changeText() { let paragraph = document.getElementById('paragraph'); paragraph.textContent = 'Текст изменен!'; } </script> </body> </html>
Здесь мы видим простой HTML-документ с заголовком, параграфом и кнопкой. При нажатии на кнопку вызывается функция changeText(), которая меняет текст внутри параграфа с использованием метода document.getElementById.
Основные методы работы с DOM
Основные методы работы с Document Object Model (DOM) позволяют разработчикам взаимодействовать с элементами HTML-документа, создавая, модифицируя и удаляя их. Вот ключевые методы, используемые для работы с DOM:
1. Получение элементов
document.getElementById(id)
Метод возвращает первый элемент с указанным значением атрибута id. Поскольку id должен быть уникальным в пределах одного документа, этот метод всегда возвращает только один элемент.
let element = document.getElementById(‘my-id’);
document.getElementsByClassName(className)
Возвращает коллекцию всех элементов, имеющих указанный класс. Коллекция может содержать ноль или больше элементов.
let elements = document.getElementsByClassName(‘my-class’);
document.getElementsByTagName(tagName)
Возвращает коллекцию всех элементов с заданным именем тега. Например, если передать «div», то будут возвращены все элементы <div>.
let divs = document.getElementsByTagName(‘div’);
document.querySelector(selector)
Возвращает первый элемент, соответствующий указанному CSS-селектору. Если такой элемент не найден, возвращается null.
let firstDiv = document.querySelector(‘div’);
let specificElement = document.querySelector(‘.my-class#my-id’);document.querySelectorAll(selector)
Возвращает коллекцию всех элементов, соответствующих указанному CSS-селектору. Эта коллекция будет пустой, если ни один элемент не соответствует селектору.
let allParagraphs = document.querySelectorAll(‘p’);
2. Создание элементов
document.createElement(tagName)
Создает новый элемент с указанным именем тега. Этот метод полезен для динамического создания элементов на странице.
let newDiv = document.createElement(‘div’);
3. Манипуляции с деревом DOM
parentNode.appendChild(child)
Добавляет дочерний элемент в конец списка дочерних элементов родительского элемента.
let container = document.getElementById(‘container’);
container.appendChild(newDiv);parentNode.insertBefore(newNode, referenceNode)
Вставляет новый узел перед указанным узлом (ссылочным узлом).
let secondChild = container.children[1];
container.insertBefore(newDiv, secondChild);parentNode.replaceChild(newNode, oldNode)
Замещает существующий узел новым узлом.
let oldDiv = document.getElementById(‘old-div’);
container.replaceChild(newDiv, oldDiv);parentNode.removeChild(child)
Удаляет указанный дочерний элемент из родительского элемента.
container.removeChild(oldDiv);
4. Работа со свойствами и атрибутами
element.setAttribute(name, value)
Устанавливает значение указанного атрибута у элемента.
newDiv.setAttribute(‘class’, ‘my-new-class’);
element.getAttribute(name)
Возвращает значение указанного атрибута элемента.
let classValue = newDiv.getAttribute(‘class’);
element.hasAttribute(name)
Проверяет наличие указанного атрибута у элемента и возвращает true или false.
if (newDiv.hasAttribute(‘class’)) {
console.log(«Элемент имеет класс»);
}element.removeAttribute(name)
Удаляет указанный атрибут у элемента.
newDiv.removeAttribute(‘class’);
5. Обработка событий
element.addEventListener(type, listener[, options])
Присваивает обработчик события определенного типа для данного элемента. Это позволяет реагировать на различные взаимодействия пользователя, такие как клики мыши, нажатия клавиш и другие события.
Манипуляция стилями элемента (style):
element.style.color = ‘red’;
element.style.backgroundColor = ‘#f0f0f0’;
Работа с атрибутами (setAttribute, getAttribute):element.setAttribute(‘attribute’, ‘value’);
let value = element.getAttribute(‘attribute’);
Обработка событий (addEventListener):button.addEventListener(‘click’, function(event) {
alert(‘Кнопка нажата!’);
});
Пример использования DOM и JavaScript
Рассмотрим более сложный пример, где мы будем динамически создавать элементы и управлять ими через JavaScript.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Динамическое создание элементов</title> <style> .item { margin-bottom: 10px; padding: 10px; border: 1px solid #ccc; } </style> </head> <body> <input type="text" id="newItemInput" placeholder="Введите новый пункт..."> <button onclick="addNewItem()">Добавить</button> <ul id="list"></ul> <script> function addNewItem() { let input = document.getElementById('newItemInput'); let list = document.getElementById('list'); if (input.value !== '') { let newItem = document.createElement('li'); newItem.classList.add('item'); newItem.textContent = input.value; let deleteButton = document.createElement('button'); deleteButton.textContent = 'Удалить'; deleteButton.onclick = function() { list.removeChild(this.parentNode); }; newItem.appendChild(deleteButton); list.appendChild(newItem); input.value = ''; } else { alert('Пожалуйста, введите текст.'); } } </script> </body> </html>
Этот код создает простую форму для добавления пунктов списка. Пользователь вводит текст в поле ввода, нажимает кнопку «Добавить», и новый пункт добавляется в список. Каждый пункт имеет кнопку «Удалить», при нажатии на которую соответствующий пункт удаляется из списка.
Заключение
DOM предоставляет мощные инструменты для управления структурой и содержимым веб-страницы. В сочетании с JavaScript, разработчики могут создавать сложные и интерактивные веб-приложения, которые реагируют на действия пользователя и обновляют содержимое страницы без перезагрузки.
Знание основ DOM и умение работать с ним являются ключевыми навыками для любого фронтенд-разработчика.
Загрузка...