1.1 Основные концепции DOM
Документная объектная модель (DOM) — это программный интерфейс для веб-документов. Она представляет структуру документа как дерево узлов, где каждый узел является частью документа, такой как элемент, текст, комментарий и так далее. Понимание DOM и его узлов является фундаментальным аспектом работы с веб-технологиями.
Основные концепции DOM
Что такое DOM?
DOM (Document Object Model) представляет собой иерархическую структуру, которая описывает содержимое HTML-документа. Он позволяет программам и скриптам динамически доступ к содержимому документа и изменять его структуру, стиль и содержание.
Узлы и элементы
В контексте DOM все части документа рассматриваются как узлы (node). Узлы бывают нескольких типов:
- Элементные узлы: представляют HTML-теги.
- Текстовые узлы: представляют текст, находящийся внутри элементных узлов.
- Узлы комментариев: представляют комментарии в HTML.
- Документные узлы: представляют сам документ.
Дерево узлов
DOM представляет собой древовидную структуру, где каждый узел может иметь потомков (дочерние узлы). Корневым узлом является объект document, который представляет весь HTML-документ.
Пример структуры DOM:
<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
Для этого документа дерево DOM будет выглядеть следующим образом:
document
└── html
├── head
│ └── title
│ └── #text: "Document Title"
└── body
├── h1
│ └── #text: "Hello, World!"
└── p
└── #text: "This is a paragraph."
1.2 Типы узлов
1. Элементные узлы
Элементные узлы соответствуют HTML-тегам. Например, узел для тега <body> называется элементным узлом.
Пример:
В этом примере <body> и <h1> являются элементными узлами.
<body>
<h1>Hello, World!</h1>
</body>
2. Текстовые узлы
Текстовые узлы содержат текст внутри элементных узлов. Текстовые узлы являются потомками элементных узлов и содержат строковые данные.
Пример:
В этом примере текст "Hello, World!" является текстовым узлом, потомком узла <h1>.
<h1>Hello, World!</h1>
3. Узлы комментариев
Узлы комментариев представляют собой комментарии в HTML, начинаются с <!-- и заканчиваются -->.
Пример:
В этом примере <!-- This is a comment --> является узлом комментария.
<!-- This is a comment -->
<p>This is a paragraph.</p>
4. Документные узлы
Документный узел представляет собой корневой узел DOM-дерева и является родительским узлом для всех остальных узлов в документе.
Пример:
Объект document в JavaScript представляет собой документный узел:
console.log(document);
1.3 Взаимодействие с узлами DOM
1. Получение информации о узлах
Свойства объекта узла позволяют получить информацию о конкретном узле. Например, можно узнать тип узла, его имя и содержимое.
Пример:
<html>
<head>
<title>Мой веб-сайт</title>
</head>
<body>
<h1>Привет, мир!</h1>
</body>
</html>
const heading = document.querySelector('h1');
console.log(heading.nodeName); // Выведет: H1
console.log(heading.nodeType); // Выведет: 1 (Элементный узел)
console.log(heading.textContent); // Выведет: "Привет, мир!"
2. Изменение содержимого узлов
Содержимое узлов можно изменять с помощью свойств и методов DOM.
Пример:
const paragraph = document.querySelector('p');
paragraph.textContent = 'Updated text content';
3. Работа с дочерними узлами
Каждый узел DOM может иметь дочерние узлы, к которым можно получить доступ и изменять их.
Пример:
<html>
<head>
<title>Мой веб-сайт</title>
</head>
<body>
<ul>
<li>О нас</li>
<li>Карьера</li>
<li>Контакты</li>
</ul>
</body>
</html>
const list = document.querySelector('ul');
const firstItem = list.firstElementChild;
const lastItem = list.lastElementChild;
console.log(firstItem.textContent); // Выведет текст первого элемента списка
console.log(lastItem.textContent); // Выведет текст последнего элемента списка
1.4 Полезные свойства
1. Свойства nodeName и nodeType
nodeNameвозвращает имя узлаnodeTypeвозвращает тип узла (например, 1 для элементных узлов, 3 для текстовых узлов)
Пример:
<html>
<head>
<title>Мой веб-сайт</title>
</head>
<body>
<h1>Привет, мир!</h1>
</body>
</html>
const element = document.querySelector('h1');
console.log(element.nodeName); // Выведет: H1
console.log(element.nodeType); // Выведет: 1
2. Свойства textContent и innerHTML
textContentвозвращает или устанавливает текстовое содержимое узлаinnerHTMLвозвращает или устанавливает HTML-содержимое узла
Пример:
<html>
<head>
<title>Мой веб-сайт</title>
</head>
<body>
<p>Действительно <b>интересный</b> и <b>полезный</b> абзац!</p>
</body>
</html>
const element = document.querySelector('p');
console.log(element.textContent); // Выведет текстовое содержимое абзаца
console.log(element.innerHTML); // Выведет HTML-содержимое абзаца
3. Свойства parentNode, childNodes, firstChild и lastChild
parentNodeвозвращает родительский узелchildNodesвозвращает коллекцию всех дочерних узловfirstChildвозвращает первый дочерний узелlastChildвозвращает последний дочерний узел
Пример:
<html>
<head>
<title>Мой веб-сайт</title>
</head>
<body>
<ul>
<li>О нас</li>
<li>Карьера</li>
<li>Контакты</li>
</ul>
</body>
</html>
const element = document.querySelector('ul');
console.log(element.parentNode); // Выведет родительский узел
console.log(element.childNodes); // Выведет коллекцию дочерних узлов
console.log(element.firstChild); // Выведет первый дочерний узел
console.log(element.lastChild); // Выведет последний дочерний узел
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ