Работа с DOM
Введение в DOM
Хотя веб-браузером и вообще вебом область действия JavaScript не ограничивается, однако по прежнему одной из ключевых задач JavaScript является взаимодействие с пользователем и манипуляция элементами веб-страницы в браузере. Для JavaScript веб-страница доступна в виде объектной модели документа (document object model) или сокращенно DOM. DOM описывает структуру веб-станицы в виде древовидного представления и предоставляет разработчикe способ получить доступ к отдельным элементам веб-страницы.
Важно не путать понятия BOM (Browser Object Model - объектная модель браузера) и DOM (объектная модель документа). Если BOM предоставляет доступ к браузеру и его свойствам в целом, то DOM предоставляет доступ к отдельной веб-странице или html-документу и его элементам.
Например, рассмотрим простейшую страницу:
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h2>Page Header</h2> <div> <h3>Block Header</h3> <p>Text</p> </div> </body> </html>
Дерево DOM для этой страницы будет выглядеть следующим образом:
Таким образом, все компоненты упорядочены в DOM иерархическим образом, где каждый компонент представляет отдельный узел. То есть каждый элемент, например,
элемент div, представляет собой узел. Но также и текст внутри элемента представляет отдельный узел.
Существует следующие виды узлов:
Document: корневой узел html-документа, представляет весь документ в целом
Element: html-элемент
Text: текст элемента
Attr: атрибут html-элемента
DocumentType: DTD или тип схемы XML-документа
DocumentFragment: место для временного хранения частей документа
EntityReference: ссылка на сущность XML-документа
ProcessingInstruction: инструкция обработки веб-страницы
Comment: элемент комментария
CDATASection: секция CDATA в документе XML
Entity: необработанная сущность DTD
Notation: нотация, объявленная в DTD
Несмотря на такое большое количество типов узлов, как правило, применяются первые 4 типа.
- Глава 1. Введение в JavaScript
- Глава 2. Основы javascript
- Глава 3. Функциональное программирование
- Глава 4. Объектно-ориентированное программирование
- Объекты
- Ключевое слово this
- Вложенные объекты и массивы в объектах
- Копирование и сравнение объектов
- Проверка наличия и перебор методов и свойств
- Объекты в функциях
- Функции-конструкторы объектов
- Расширение объектов. Прототипы
- Функция как объект. Методы call и apply
- Функция Object.create. Конфигурация свойств объектов
- Наследование прототипов
- Наследование прототипов конструкторов
- Инкапсуляция свойств. Геттеры и сеттеры
- Деструктуризация
- Оператор ?.
- Константные объекты. Запрет изменения объекта
- Глава 5. ООП. Классы.
- Глава 6. Массивы
- Глава 7. Строки и регулярные выражения
- Глава 8. Обработка ошибок
- Глава 9. Встроенные объекты
- Глава 10. Коллекции и итераторы
- Глава 11. Работа с DOM
- Глава 12. События
- Глава 13. Работа с формами
- Глава 14. Работа с браузером и BOM
- Глава 15. Форматы JSON и XML
- Глава 16. Хранение данных
- Глава 17. Promise, async и await
- Глава 18. AJAX-запросы и XMLHttpRequest
- Глава 19. Fetch API
- Глава 20. Web Socket API и Server-Sent Events
- Глава 21. Локализация
- Глава 22. Модули
- Глава 23. Canvas API
- Глава 24. IndexDB API
- Глава 25. Drag-and-Drop API
- Глава 26. File API
- Глава 27. Web Worker API
- Глава 28. Дополнительные Web API
- Глава 29. Дополнительные статьи