Что такое top.document и document в веб-разработке?

Какой из них следует использовать и когда?

Недавно я работал над расширением для Chrome, которое только что было опубликовано! Расширение LinkSweep использует сценарий содержимого, которому потребуется доступ к веб-странице текущего окна. Этот скрипт содержимого будет использоваться для сбора данных с веб-страницы с помощью объектной модели документа.

Что такое ДОМ?

Как вы, вероятно, уже знаете, объектная модель документа (или DOM) — это представление данных объектов, которые составляют структуру и содержимое документа в Интернете (Mozilla).

Что такое документ?

Как упоминалось ранее, DOM содержит содержимое веб-страницы (которое является частью документа веб-страницы) в виде объектов. Чтобы манипулировать элементами на веб-сайте, скажем, с помощью JavaScript, вам необходимо получить доступ к DOM. Объект, обычно используемый для подключения вашего кода к DOM, называется document.

Объект document представляет сам DOM и может использоваться для доступа (и изменения) различных свойств, присутствующих в объекте document.

Все свойства, методы и события, доступные для управления и создания веб-страниц, организованы в объекты. — Мозилла

Допустим, вы хотите собрать все теги p на своей веб-странице (DOM) и изменить их цвет. Вы можете сделать это, используя document.

См. ниже.

var pTags = document.querySelectorAll("p");
for (var i = 0; i < pTags.length; ++i){
  pTags[i].style.color = 'red'
}

Если вы скопируете приведенный выше код и вставите его в свою консоль, вскоре вы увидите, что большая часть содержимого этого сообщения станет красной.

Использование document, вероятно, является наиболее распространенным способом доступа к DOM, но является ли он единственным способом?

Нет, есть еще один.

Что такое (верхний) документ?

Победитель?

Неа. top.document.

Это ссылка на window.top.document, которая даст вам самую верхнюю document в окне. Что это значит?

Что ж, если вы замените document в приведенном выше коде на top.document, вы получите тот же результат. Почему? Потому что сейчас вы находитесь в самой верхней document части этого окна.

Итак, когда может быть случай, когда document и top.document могут не равняться одному и тому же? Они не будут равны друг другу, если есть документ…внутри документа.

Это относится к iframe.

Если вы пишете код, который выполняется в iframe, это означает, что при выполнении document.querySelectorAll(“p”) вы получите теги p только внутри iframe,не на всей веб-странице.

Проверьте веб-страницу ниже.

Как видно из сопутствующих элементов, в текущей модели DOM есть два элемента iframe. Один iframe фактически находится внутри другого.

Средняя часть изображения, где написано Элемент iframe, является еще одним document в пределах самого верхнего document веб-страницы.

На панели элементов справа прямо под открывающим тегом iframe находится начало нового тега html. Тег html является корневым тегом HTML document.

Это то, что содержит все остальные элементы HTML на веб-странице.

Если вы запускаете код в одном из элементов iframe и хотите получить доступ к самому внешнему элементу document (имеется в виду веб-страница с HTML-кодом слева и HTML-результатом посередине (оба явно отличаются от панели элементов справа), вам нужно будет использовать top.document.

Используя top.document, где бы вы ни находились в любом количестве вложенных документов, вы перейдете к самому внешнему (или верхнему) документу. Какое это имеет отношение к моему расширению Chrome?

Получите весь мой последний контент, создав учетную запись в партнерской программе Medium и подписавшись на мои электронные письма. :)

Мое расширение Chrome

Моему расширению Chrome требуется доступ к ссылкам в текущем документе. Для этого мне нужно использовать document.links. Это сработало совершенно нормально. Не работал еще один аспект моего расширения — настраиваемое всплывающее окно.

Мне нужно было использовать настраиваемое всплывающее окно для моего расширения Chrome, чтобы сосредоточиться на document (об этом я расскажу в другом посте). Я хотел создать всплывающее окно и добавить его на веб-страницу. Таким образом, пользователь мог видеть всплывающее окно в правом верхнем углу своей страницы.

Проблема? Ну, когда я попытался использовать его для Blogger.com, я столкнулся с случаем, когда были вложенные документы.

Когда я впервые запустил код и использовал document.body.append(popupHtml), в итоге я внедрил всплывающий узелв iframe. Это в основном вставляло всплывающее содержимое в редактируемую область сообщения в блоге (что выглядело довольно глупо).

Именно это привело меня к открытию top.document. Чтобы добавить всплывающее окно к самому внешнему (или самому верхнему) document, мне нужно было использовать top.document.

Посмотрите результат после внесения изменений ниже.

Идеальный!

Краткое содержание

Подведем итог тому, что мы узнали сегодня на уроке.

DOM: содержимое сайта представлено в виде объектов. Можно получить доступ/манипулировать с помощью объекта document.
document: это то, что содержит контент сайта. Объект document можно использовать как точку входа в контент веб-сайта.
top.document: работает аналогично document, за исключением того, что относится конкретно к самому внешнему (или самому верхнему) экземпляру document.
iframe: встроенный фрейм, используемый для встраивания другого документа в текущий HTML. Это способ вставить document внутри document.

Зачем вам нужен доступ к самому внешнему document? Если вы выполняете код внутри iframe, document, на который вы будете ссылаться, будет ближайшим, то есть тем, который внутри iframe. Если вы хотите получить доступ к DOM за пределами iframe, вы должны использовать top.document вместо document.

Какие еще способы, по вашему мнению, могут пригодиться top.document? Дай мне знать в комментариях!

Обновите бесплатную подписку на Medium и получайте неограниченное количество статей без рекламы от тысяч авторов в самых разных изданиях. Это партнерская ссылка, и часть вашего членства помогает мне получать вознаграждение за контент, который я создаю.

Вы также можете подписаться по электронной почте и получать уведомления, когда я публикую что-то новое!