Объектная модель документа DOM представляет собой программный интерфейс API для документов в форматах HTML и XML. Характеристиками программного интерфейса DOM являются:
- независимость от платформы и языка, на котором написан документ;
- не накладывает ограничений на структуру документа;
- позволяет менять содержимое, структуру и оформление документов;
- предоставляет доступ программам и скриптам к содержимому HTML и XML документов.
Поскольку DOM является программным интерфейсом API, он состоит из структурированного множества узлов и объектов, которые имеют, в свою очередь, свойства и методы. DOM является связующим звеном между веб-страницей и языками программирования.
Веб-страница является документом, который может быть представлен как в виде страницы в браузере, так и на языке гипертекстовой разметки HTML. DOM реализует другой способ представления, хранения и управления этим документом:
- поддерживает объектно-ориентированное представление веб-страницы;
- позволяет изменять страницу при помощи языка описания сценариев.
В качестве языка описания сценариев обычно используется JavaScript.
Как происходит преобразование текста веб-страницы в интерактивную браузерное представление?
Браузер выполняет одновременно 2 последовательности действий, анализ визуальных элементов и анализ команд на языке гипертекстовой разметки, которые необходимо выполнить.
В результате этого процесса формируется дерево рендеринга, содержащее графические элементы, текст и стили объектов. Затем выполняется отрисовка объектов страницы, которая уже представлена в виде объектной модели документа DOM и объектной модели стилей CSSOM.
Последним шагом процесса, который еще называют Critical Rendering Path, является группировка элементов в композиционные слои для последующего их плавного отображения. Композиционные слои повышают производительность, делают страницу более отзывчивой.
Объекты и методы DOM описаны в спецификации HTML DOM API, поддерживаемой Консорциумом всемирной паутины W3C. Зная эту спецификацию, мы можем:
- производить действия над элементами страницы, добавлять, удалять или изменять их;
- изменять свойства элементов страницы;
- получить доступ к данным форм;
- обрабатывать события интерактивных элементов;
- создавать новые события объектов страницы.
При любых изменениях объектов страницы браузер заново создает дерево рендеринга и обновляет изображение страницы. В результате мы получаем всегда актуальную отрисовку страницы в соответствии с DOM.
Знание принципов построения DOM дает понимание, что и как можно изменять в каждом объекте страницы, находить нужные элементы и их свойства, используя панель разработчика DevTools или программным путем, при помощи языка JavaScript, а также тестировать объекты страницы и их свойства на соответствие документации.
Конечно, в одной статье не уместить все, что связано с DOM и WEB тестированием, поэтому практику использования DevTools и JavaScript рассмотрим отдельно.
Хотелось бы узнать о Вашем опыте использования DevTools. Об этом можно рассказать в комментариях или разместить в комментариях ссылку на Ваш опыт, опубликованный на сайте или форуме.