JavaScript для тупых
  • JavaScript для тупых
  • Главная
  • Об учебнике
  • Формат обучения
  • Ввод в JavaScript. Что это? И для чего нужен?
  • Братки JavaScript-а
  • Переменные в JavaScript
  • Переменные. const, let, var
  • Преобразование типов
  • Операторы сравнения
  • Типы данных. Number
  • Типы данных. String
  • Типы данных. Boolean
  • Типы данных. null и undefined
  • Типы данных. Оператор typeof
  • Условные операторы: if и ?
  • Циклы: while, for
  • Операторы
  • Логические операторы
  • Знакомство с switch
  • Функции
  • Функции. Возврат значения
  • Стрелочные функции
  • Знакомство с DOM
  • DOM-элементы. Получение объектов
  • DOM-элементы. События. Ввод.
  • DOM-элементы. События. Часть 2
  • Объекты. Начало игры
  • Массивы
  • Методы массивов: splice, slice, concat
  • Методы массивов: find, findIndex, filter
  • Методы массивов: map, sort
  • Методы массивов: reverse, split, join
  • Методы массивов: indexOf, lastIndexOf, includes
  • Методы массивов: reduce, spread
  • Методы массивов: Array.isArray, some, every
  • Методы массивов: flat, fill
  • Планирование вызова функции: setTimeout
  • Планирование вызова функции: setInterval
  • Объекты. Свойства.
  • Объекты. Методы
  • this, call, apply, bind
  • Замыкания
  • Прототипы
  • Promises (Обещания)
Powered by GitBook
On this page

Was this helpful?

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

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

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

Last updated 4 years ago

Was this helpful?

Что такое 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-документа. Мы можем изменить положение элемента, цвет, да почти всё что угодно.

Generic badge