Знакомство с DOM

JavaScript простым языком

Generic badge

Что такое DOM?

Все теги в HTML-документе рассматриваются браузером как объекты. Внутри тега могут содержаться другие теги. Такие теги будут являться дочерними. Проще говоря, весь HTML-документ представляет собой дерево тегов с разными разветвлениями. В целом, это и есть DOM (Document Object Model).

Итак, самая простая страница:

<html>
<head>
    <title>Page title</title>
</head>
<body>
    <p>Текст</p>
    <button>Click Me</button>
</body>
</html>

Данный пример — самая простая HTML-страница. Напомню, что эту разметку нужно сохранять в формате .html, чтобы ее мог открыть браузер.

Если внимательно посмотреть на приведенные в примере теги, то можно заметить, что внутри одних тегов мы чётко видим другие.

Внутри тега <html> лежат все остальные теги: <head>, <body>. Внутри же этих тегов, например, <head> лежит тег <title>.

Все, что существует внутри HTML-документа, является частью DOM-дерева.

Если честно, то различных аспектов с DOM достаточно много, но не хочется на них заострять большое внимание, потому как это будет больше теории, нежели практики. А я пытаюсь научить тебя больше практической части.

Если совсем подытожить, то DOM позволяет нам крутить и вертеть всеми элементами нашего HTML-документа. Мы можем изменить положение элемента, цвет, да почти всё что угодно.

PreviousСтрелочные функцииNextDOM-элементы. Получение объектов

Last updated

Was this helpful?