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

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

<! DOCTYPE html>
<Html>
  <Head>
    <title> hello, world </ title>
  </ Head>
  <Body>
     hello, world
  </ Body>
</ Html>

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

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

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

Внутри <html> находятся два узла: <head> и <body>. Они становятся дочерними узлами для <html>.

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

document.title
document.body
document.body.innerHTML

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

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