Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) - объектная модель, используемая для XML/HTML-документов.
Согласно DOM-модели, документ является иерархией. Каждый HTML-тег образует отдельный элемент-узел, каждый фрагмент текста - текстовый элемент, и т.п. Проще говоря, DOM - это представление документа в виде дерева тегов. Это дерево образуется за счет вложенной структуры тегов плюс текстовые фрагменты страницы, каждый из которых образует отдельный узел.
Ниже приведен пример HTML-документа и изображения дерева DOM-объектов для него:
<html>
<head>
<title>Документ</title>
</head>
<body>
<div id="dataKeeper">Заголовок</div>
<ul>
<li>Тескт 1</li>
<li>Тескт 2</li>
</ul>
<div id="footer">Конец документа</div>
</body>
</html>
На рисунке для краткости текстовые узлы обозначены просто решеткой.
Каждый DOM-элемент является объектом и предоставляет свойства для манипуляции своим содержимым, для доступа к родителям и потомкам.
