Проще говоря, DOM означает объектную модель документа и представление страницы, на которую вы смотрите.

Веб-документы MDN:

«Объектная модель документа (DOM) — это программный интерфейс для документов HTML и XML. Он представляет страницу, чтобы программы могли изменять структуру, стиль и содержимое документа. DOM представляет документ в виде узлов и объектов. Таким образом, языки программирования могут подключаться к странице».

DOM представлен в виде дерева HTML страницы. Каждый элемент в дереве представлен как узел на дереве.

Мы можем получить доступ к элементам в документе и вносить в них изменения с помощью JavaScript.

Как выделить элементы в документе

  • получитьэлемент по идентификатору()
  • селектор запросов()
  • ЗапросСелекторВсе()

получитьElementById()

В HTML идентификаторы используются для создания идентификатора элемента HTML. Мы можем использовать JavaScript для захвата тега HTML, ссылаясь на имя идентификатора.

document.getELementById('id goes here')

селектор запросов()

Вы можете использовать этот метод для поиска элементов с одним или несколькими селекторами CSS. Этот метод найдет первый элемент в программе, соответствующий селектору CSS.

document.querySelector('h1')
//or by class 
document.querySelector('.list')
//or by id
document.querySelector('#list)

querySelectorAll()

Этот метод находит все элементы, соответствующие селектору CSS, и возвращает список узлов.

document.querySleectorAll('ul > li')
//finds all of the 'li' children of the ul