IGS

IGS
Вернуться к Курс

Базовый курс JavaScript

0% Завершено
0/25 Шагов
  1. 1) console.log(), Переменные
  2. 2) Типы данных, Операторы
  3. 3) Условные конструкции
  4. 4) Объекты, массивы
  5. 5) Циклы
  6. 6) Функции. Диалоговые окна
  7. 7) Результат функции. Стрелочная фукция
  8. 8) callback, find, filter
  9. 9) Введение в методы и свойства
  10. 10) Методы строк и чисел
  11. 11) Методы массивов
  12. 12) Работа с DOM
  13. 13) Элементы,HTMLCollection и NodeList
  14. 14) Создание, добавление, замена и удаление элементов. Управление атрибутами элементов. Свойство className
  15. 15) addEventListener()
  16. 16) window, event
  17. 17) Работа с формами
  18. 18) Таймеры. this
  19. JSON
  20. 19) Обработка ошибок
  21. 20) JSON, Promise, async и await
  22. 21) callBack()
  23. 22) fetch
  24. 7) Взаимодействие с DOM (Document Object Model)
  25. 23) LocalStorage, sessionStorage
Базовый курс JavaScript 12) Работа с DOM
В прогрессе
Урок 12 из 25
В прогрессе

12) Работа с DOM

 Для JavaScript веб-страница доступна в виде объектной модели документа (document object model) или сокращенно DOM. DOM описывает структуру веб-станицы в виде древовидного представления и предоставляет разработчикe способ получить доступ к отдельным элементам веб-страницы.

Дерево 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

Свойства объекта document

Для работы со структурой DOM в JavaScript предназначен объект document, который определен в глобальном объекте window. Для получения базовой информации о веб-странице объект document предоставляет ряд свойств:

  • title: представляет заголовк документа (который указан в элементе <title>)

  • lastModified: содержит дату последнего изменения документа

  • URL: содержит адрес URL текущего документа

  • domain: содержит домент, к которому принадлежит веб-страница документа

  • documentElement: предоставляет доступ к корневому элементу <html>

  • body: предоставляет доступ к элементу <body> на веб-странице

  • head: предоставляет доступ к элементу <head> на веб-странице

  • cookie: содержит коллекцию всех куки для текущего документа

  • images: содержит коллекцию всех объектов изображений (элементов img)

  • links: содержит коллекцию ссылок — элементов <a> и <area>, у которых определен атрибут href

  • anchors: предоставляет доступ к коллекции элементов <a>, у которых определен атрибут name

  • forms: содержит коллекцию всех форм на веб-странице

Эти свойства не предоставляют доступ ко всем элементам, однако позволяют получить наиболее часто используемые элементы на веб-странице. Например, получим корневой узел документа:

				
					console.log(document.documentElement);

Element

HTML-элементы содержат свойства, которые можно разделить на группы:

  • свойства, связанные с HTML-атрибутами: ID, классы, стили и так далее;
  • свойства и методы связанные с обходом DOM: получение дочерних элементов, родителя, соседей;
  • информация о содержимом;
  • специфические свойства элемента.

Первые три группы свойств есть у всех элементов. Специфические свойства отличаются в зависимости от типа элемента. Например, у полей ввода есть свойства, которых нет у параграфов и блоков: value, type и другие.

 

Свойства и методы, связанные с DOM

  • getElementsByClassName() — поиск среди дочерних элементов по названию класса;
  • getElementsByTagName() — поиск среди дочерних элементов по названию тега;
  • querySelector() — поиск первого дочернего элемента, подходящего под CSS-селектор;
  • querySelectorAll() — поиск всех дочерних элементов подходящих под CSS-селектор;

 

Домашняя работа

Изменить стили элементов через .style