Что такое DOM
DOM (Document Object Model) — программный интерфейс, который представляет структуру веб-страницы в виде иерархической древовидной структуры. Интерфейс позволяет программам динамически получать доступ к содержимому, структуре и стилю веб-страницы, а также изменять их. Он предоставляет способ взаимодействия с документами HTML, XML и XHTML с использованием набора единых методов и свойств. Интерфейс широко применяется в веб-разработке для создания интерактивных и динамических веб-страниц.
История
История началась в конце 1990-х годов с развития и стандартизации языка разметки HTML. В то время, когда веб-страницы становились все более сложными, требовался способ программного доступа и манипулирования содержимым веб-страниц.
В 1997 году компания Netscape Communications разработала первую версию, известную как «Netscape JavaScript API». Она была предназначена для работы с веб-страницами в браузере Netscape Navigator. Корпорация Microsoft в то же время разработала свой собственный подход к программному доступу к веб-страницам, называемый «Dynamic HTML» (DHTML).
Для обеспечения стандартизации и совместимости между браузерами, в 1998 году World Wide Web Consortium (W3C) начал разработку стандарта DOM Level 1. Он был выпущен в 1998 году и предоставил общий набор интерфейсов и методов для доступа и манипулирования элементами веб-страницы.
В последующие годы W3C выпустил несколько версий, включая DOM Level 2 (2000), Level 3 (2004) и DOM4 (2015). Каждая новая версия вносила дополнения и улучшения в функциональность, расширяя его возможности.
С развитием веб-технологий и внедрением новых стандартов, таких как HTML5 и CSS3, DOM продолжает эволюционировать и обеспечивать более мощные инструменты для веб-разработчиков.
Реализация DOM
DOM реализуется веб-браузерами, которые предоставляют программный интерфейс для доступа и манипуляции элементами веб-страницы. Каждый браузер имеет свою собственную реализацию интерфейса, но они следуют общим принципам и спецификациям, установленным W3C.
В основе реализации DOM лежит ядро браузера, которое интерпретирует и выполняет разметку HTML, CSS и JavaScript веб-страницы. Браузер анализирует HTML-код страницы и создает в памяти структуру, представляющую каждый элемент страницы в виде объекта с соответствующими свойствами и методами.
JavaScript является основным языком программирования, используемым для взаимодействия с DOM. Он предоставляет различные методы и свойства, которые позволяют получать доступ к элементам, изменять их содержимое, структуру и стиль, а также реагировать на события, происходящие на странице.
Современные браузеры также поддерживают API, такие как jQuery, которые упрощают работу с интерфейсом и предоставляют дополнительные функциональные возможности.
В общем, реализация интерфейса веб-браузерами обеспечивает программный интерфейс для управления веб-страницами и создания интерактивных и динамических веб-приложений.
Пример
HTML-код:
<!DOCTYPE html>
<html>
<head>
<title>Пример</title>
</head>
<body>
<h1 id=»heading»>Привет, мир!</h1>
<p class=»content»>Это пример DOM.</p>
<button id=»changeTextBtn»>Изменить текст</button>
<script src=»script.js»></script>
</body>
</html>
JavaScript-код (script.js):
// Получение элемента по идентификатору
const headingElement = document.getElementById(‘heading’);
console.log(headingElement.textContent); // Выводит: Привет, мир!// Изменение содержимого элемента
headingElement.textContent = ‘Привет, новый мир!’;// Получение элемента по классу
const contentElements = document.getElementsByClassName(‘content’);
for (let element of contentElements) {
console.log(element.textContent); // Выводит: Это пример DOM.
}// Добавление обработчика события на кнопку
const changeTextBtn = document.getElementById(‘changeTextBtn’);
changeTextBtn.addEventListener(‘click’, function() {
headingElement.textContent = ‘Текст изменен!’;
});
Этот пример демонстрирует, как получить доступ к элементам по идентификатору и классу, изменить их содержимое и добавить обработчик события на кнопку. При клике на кнопку «Изменить текст» текст заголовка изменится на «Текст изменен!».