Объектная модель документа, или сокращенно DOM, является независимой от платформы и языка моделью для представления документов HTML или XML. Она определяет логическую структуру документов и то, как они будут управляются прикладной программой.
В DOM все части документа, такие как элементы, атрибуты, текст и т. д., организованы в иерархическую древовидную структуру, которая состоит из родительских элементов и их потомков. В терминологии DOM эти отдельные части документа называются узлами.
Объектная модель документа, представляющая документ HTML, называется HTML DOM. Точно так же DOM, представляющий документ XML, называется XML DOM.
В этом руководстве мы рассмотрим HTML DOM, который предоставляет стандартный интерфейс для доступа и управления HTML-документами через JavaScript. С помощью HTML DOM вы можете использовать JavaScript для создания HTML-документов, навигации по их иерархической структуре, а также добавления, изменения или удаления элементов и атрибутов или их содержимого.
Чтобы понять это, давайте рассмотрим следующий простой HTML-документ:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Mobile OS</h1>
<ul>
<li>Android</li>
<li>iOS</li>
</ul>
</body>
</html>Приведенный выше HTML-документ может быть представлен следующим деревом DOM:
Приведенная выше диаграмма демонстрирует отношения родитель/потомок между узлами. Самый верхний узел, т. е. узел Document, является корневым узлом дерева DOM, у которого есть один дочерний элемент <html>. Элементы <head> и <body> являются дочерними узлами родительского узла <html>.
Элементы <head> и <body> также являются соседями или братьями, поскольку они находятся на одном уровне. Кроме того, текстовое содержимое внутри элемента является дочерним узлом родительского элемента. Так, например, «Мобильная ОС» рассматривается как дочерний узел <h1>, который ее содержит, и так далее.
Комментарии внутри HTML-документа также являются узлами в дереве DOM, но они никак не влияет на визуальное представление документа. Комментарии полезны для документирования кода, однако вам редко придется их извлекать и манипулировать.
HTML-атрибуты, такие как id, class, title, style и т. д., также рассматриваются как узлы в иерархии DOM, но они не участвуют в родительских/дочерних отношениях, как другие узлы. Доступ к ним осуществляется как к свойствам узла элемента, который их содержит.
Каждый элемент в документе HTML, такой как изображение, гиперссылка, форма, кнопка, заголовок, абзац и т. д., представлен с использованием объекта JavaScript в иерархии DOM, и каждый объект содержит свойства и методы для описания и управления этими объектами. Например, свойство style элементов DOM может использоваться для получения или установки встроенных стилей элемента.
В следующих нескольких главах руководства мы узнаем, как получить доступ к отдельным элементам на веб-странице и управлять ими, например, изменять их стиль, содержимое и т. д. с помощью JavaScript.
Объектная модель документа или DOM — это, по сути, представление различных компонентов браузера и текущего веб-документа (HTML или XML), к которым можно обращаться или манипулировать с помощью языка скриптов, такого как JavaScript.
