DOM в контексте JavaScript

Основной инструмент для работы и динамических изменений на веб-странице — объектная модель, используемая для XML/HTML-документов или DOM (Document Object Model).
Согласно модели DOM, документ представляет собой иерархическую структуру или дерево. Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги — дочерние узлы. Для представления текста создаются узлы с типом «текст».

DOM — это представление документа в виде дерева объектов, доступное для изменения через JavaScript.

<! DOCTYPE html>
&ltHtml>
  &ltHead>
    &lttitle> hello, world </ title>
  </ Head>
  &ltBody>
     hello, world
  </ Body>
</ Html>

Для этой странички дерево будет выглядеть следующим образом:

Самый внешний тег — &lthtml>, поэтому дерево начинает расти от него.

Внутри &lthtml> находятся два узла: &lthead> и &ltbody>. Они становятся дочерними узлами для &lthtml>.

Пример доступа к элементам вышеприведенной страницы:

document.title
document.body
document.body.innerHTML

Также с DOM можно получить доступ к элементу по значениям его полей Id, Class или Tag, используя соответствующую функцию:

document.getElementById ()
document.getElementsByClassName ()
document.getElementsByTagName ()