Объектная модель документа, или сокращенно 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.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.