Основной инструмент для работы и динамических изменений на веб-странице — объектная модель, используемая для XML/HTML-документов или DOM (Document Object Model).
Согласно модели DOM, документ представляет собой иерархическую структуру или дерево. Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги — дочерние узлы. Для представления текста создаются узлы с типом «текст».
DOM — это представление документа в виде дерева объектов, доступное для изменения через JavaScript.
<! DOCTYPE html>
<Html>
<Head>
<title> hello, world </ title>
</ Head>
<Body>
hello, world
</ Body>
</ Html>
Для этой странички дерево будет выглядеть следующим образом:

Самый внешний тег — <html>
, поэтому дерево начинает расти от него.
Внутри <html>
находятся два узла: <head>
и <body>
. Они становятся дочерними узлами для <html>
.
Пример доступа к элементам вышеприведенной страницы:
document.title
document.body
document.body.innerHTML
Также с DOM можно получить доступ к элементу по значениям его полей Id, Class или Tag, используя соответствующую функцию:
document.getElementById (
) document.getElementsByClassName (
) document.getElementsByTagName (
)
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ