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

Похожие посты

Руководство по сортировке массивов в JavaScript

Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке. JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает: Реверсирование массива Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива…

Руководство по массивам в JavaScript

Массивы — это сложные переменные, которые позволяют нам хранить группы значений под одним именем переменной. Массивы JavaScript могут хранить любое допустимое значение, включая строки, числа, объекты, функции и даже другие массивы, что позволяет создавать более сложные структуры данных, такие как массив объектов или массив массивов. Предположим, вы хотите сохранить название цветов в своем коде JavaScript….

Руководство по работе с атрибутами DOM в JavaScript

Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге. JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно. Получение значения атрибута элемента Метод getAttribute() используется для получения текущего значения атрибута элемента. Если указанный…

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

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

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

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