JavaScript HTML DOM

Через HTML DOM, JavaScript может доступить и изменять все элементы HTML документа.

HTML DOM (Документ объектная модель)

Когда страница загружается, браузер создает документ объектной модели (DOM) страницы (Document Object Model).

HTML DOM Модель структурированаДерево объектов:

Дерево объектов HTML DOM

DOM HTML дерево

Через этот объектный модель, JavaScript получает все возможности для создания динамического HTML:

  • JavaScript может изменять все элементы HTML на странице
  • JavaScript может изменять все атрибуты HTML на странице
  • JavaScript может изменять все CSS стили на странице
  • JavaScript может удалять существующие элементы и атрибуты HTML
  • JavaScript может добавлять новые элементы и атрибуты HTML
  • JavaScript может реагировать на все существующие HTML события на странице
  • JavaScript может создавать новые HTML события на странице

Что вы узнаете

В следующих разделах этого руководства вы узнаете:

  • Как изменить содержимое элемента HTML
  • Как изменить стиль элементов HTML (CSS)
  • Как реагировать на события HTML DOM
  • Как добавить и удалить элементы HTML

Что такое DOM?

DOM - это стандарт W3C (World Wide Web Consortium).

DOM определяет стандарт доступа к документу:

“W3C Document Object Model (DOM) - это платформо- и языково-независимый интерфейс, который позволяет программам и скриптам динамически доступить, обновлять содержимое, структуру и стиль документа.”

Стандарт W3C DOM разделен на 3 разных части:

  • Core DOM - стандарт модели документов всех типов
  • XML DOM - стандарт модели документа XML
  • HTML DOM - стандарт модели документа HTML

Что такое HTML DOM?

HTML DOM - это стандарт HTMLОбъектыМодели иПрограммный интерфейс. Оно определяет:

  • КакОбъектыHTML элементов
  • Все элементы HTMLСвойства
  • Доступ ко всем свойствам HTML элементовМетоды
  • Все элементы HTMLСобытия

Иначе говоря: HTML DOM - это стандарт о том, как получить, изменить, добавить или удалить элементы HTML.