Page Comparison

Source- исходный код страницы полученный с сервера.
DOM- это дерево объектов созданных браузером в памяти компьютера на основе исходного кода (Source ).

Если сильно упростить, то браузер работает следующим образом:

1. Вы вводите в адресную строку URL и нажимаете энтер.

2. Браузер отправляет запрос на сервер.

3. Сервер возвращает ответ в виде исходного HTML кода страницы (Source)

4. На основе исходного кода браузер строит DOM (Data Object Model - объектная модель документа)

   • обрабатывает ошибки (добавляет тэги html, body, head и др. если они не были написаны)

   • закрывает незакрытые тэги

   • добавляет тэг <tbody> к таблицам, если его не было. Согласно DOM у таблиц (<table>) должен быть тэг <tbody>, а в HTML его можно не использовать (это стоит учитывать при построении XPath и регулярных выражений)

   • обрабатывает скрипты на странице (которые могут добавлять новые элементы на страницу, причем делать это и после полной загрузки страницы)

5. И в конце браузер на основе DOM отрисовывает и показывает Вам содержимое веб страницы.

DOM может содержать информацию и элементы, которых не будет в исходном коде (Source) т.к. он (DOM) включает в себя содержимое, которое может встраиваться с помощью JavaScript.

При работе с запросами (GET, POST и другими видами запросов) Вы всегда будете иметь дело с Source.

Для просмотра Source и DOM в ProjectMaker существуют два инструмента:

• Просмотр исходного кода (доступно как для движка Firefox так и для Chrome)

  Image Removed

  Image Added

• Инструменты web-разработчика (только для движка Chrome)

  Image RemovedImage Added