В чем разница между документом и документом в JavaScript?

В настоящее время я создаю API для JavaScript, преимущественно с использованием Visual Studio 2010 и JetBrains WebStorm (великолепно, если вы ищете пуленепробиваемую JavaScript IDE).

Просматривая список intellisense в Visual Studio (пытаясь ознакомиться с API JavaScript), я заметил, что оба Document и document существует.

1. В чем разница между Document и document
2. Что такое document экземпляр (если есть)?
3. Как можно использовать Document (так как это не функция, следовательно, не конструируемая)?
4. Самое главное, что вредного в «исправлении обезьян» Document , чтобы сделать его конструктивным?

Объяснение этих вопросов заключается в том, что я хочу создать некоторые объекты, которые вписываются в мой API (например, Document , HTMLElement и т. Д.), Но поскольку они, похоже, уже существуют в некотором отношении, я не уверен, что мне следует перезаписывать их нативную реализацию.

2 ответа

В чем разница между Document и document

document (или window.document ) является ссылкой на документ, содержащийся в окне. ( spec )

Document — это интерфейс DOM для документов, предоставляемый глобальному объекту. ( spec , спецификации )

Как можно использовать Document (так как это не функция, следовательно, не конструируемая)?

Это хост-объект, и ему не нужно следовать спецификации EcmaScript — но это не значит, что это не функция. Это может отличаться от браузера к браузеру также. Тем не менее, он не предназначен для вызова (если вы попробуете это, вы получите NOT_SUPPORTED_ERR ), есть другие методы для создания /получения новые документы. То, что вы все еще можете использовать это для

чтобы вы могли расширить его прототип и использовать эти методы для всех XMLDocuments / HTMLDocuments в вашем приложении (но только если вы знаете что не так с расширением ДОМ ).

Самое главное, что вредного в «исправлении обезьян» Document , чтобы сделать его конструктивным?

Я не уверен, как ты это сделаешь. Перезапись может повредить любой скрипт, который ожидает, что он будет работать, как указано выше (если только вы не исправите свойство prototype вашей новой функции). И, возможно, свойство Document для window в некоторых средах недоступен для записи, так что вы можете навредить себе.

1. Document — это определение прототипа для document объект глобальной области видимости означает, что прототип Document используется совместно с его экземпляром ( document ). например, Window — определение прототипа для window объект.
2. Document — это собственный объект-прототип, и вы не можете создавать его экземпляры, при создании страницы создается только один экземпляр. (опять же, как окно), как объект с одним тоном.
3. Не думаю, что переопределение Document будет хорошей практикой.

Я предлагаю использовать пространство имен для вашего API и создать ваш Document, HTMLElement и т. д. в вашем пространстве имен API, например:

Более того, вы можете унаследовать реальный прототип Document и использовать его в своем собственном объекте следующим образом:

Надеюсь, это поможет, и я понял ваш вопрос .

$(document).ready vs $(window).load vs window.onload

Данный материал является вольным переводом статьи:
RITURAJ RATAN $(document).ready vs $(window).load vs window.onload

Длительное время мы использовали ‘$(document).ready’ работая с jQuery. Написанный таким образом код начнёт выполняться сразу после того, как будет готов DOM, за исключением картинок. Указанный код будет выполняться непосредственно после готовности DOM, не дожидаясь полной загрузки изображений. Вызов $(document).ready несколько раз приведет к последовательному исполнению вызовов друг за другом. Существуют ещё несколько вариантов записи.

Если мы говорим о $(window).load то код, написанный внутри такой конструкции, начнёт работу когда будет готов весь DOM включая изображения. Такой вызов подойдёт если мы хотим работать с изображениями (расчёт размеров изображения). Данный вызов, как и предыдущий является jQuery событием. Если на нашей странице есть изображения, то сначала мы дождёмся загрузки их всех, а потом будет вызван код.

И ещё кое-что, не путайте событие window load с jQuery методом ajax load.

Событие onload является стандартным событием в DOM, а описанные выше решения работают только при наличии библиотеки jQuery. Данный вариант имеет такую же функциональность как $(window).load , но является встроенным JavaScript событием. Событие onload происходит, когда объект был загружен. Мы можем сделать такой вызов непосредственно из тега. Например, разместив его в теге изображения и как только оно будет загружено произойдёт вызов события.

Такой вызов возможен как в HTML так и в JS.

Alert “вызов после загрузки body” будет вызван сразу после того как загрузится body

Если рассмотреть пример работы onload после загрузки изображения, то выглядеть все будет как показано ниже

В чем разница между окном, экраном и документом в Javascript?

Я вижу, что эти термины используются взаимозаменяемо как глобальная среда для DOM. В чем разница (если есть), и когда я должен использовать каждый из них?

7 ответов

Window является основным корнем объекта JavaScript, который является глобальным объектом в браузере, также может рассматриваться как корень объектной модели документа. Вы можете получить к нему доступ как Window в большинстве случаев (в браузере);

window.screen — это небольшой информационный объект о физических размерах экрана.

window.document или просто document является основным объектом видимой (или лучше еще: визуализированной) объектной модели документа/DOM.

Ну, окно — это первое, что загружается в браузер. Этот объект окна имеет большинство свойств, таких как length, innerWidth, innerHeight, name, если он был закрыт, его родители и т.д.

Как насчет объекта документа? Объектом документа является ваш html, aspx, php или другой документ, который будет загружен в браузер. Документ фактически загружается внутри объекта окна и имеет доступные ему свойства, такие как заголовок, URL, cookie и т.д. Что это значит? Это означает, что если вы хотите получить доступ к свойству для окна, то это window.property, если это документ, это window.document.property, который также доступен короче как document.property.

Это кажется достаточно простым. Но что происходит, когда вводится IFRAME?

window — это фактический глобальный объект.

screen — это экран, он содержит свойства пользовательского дисплея.

document находится где DOM.

Вкратце, с более подробной информацией ниже,

• window — это контекст выполнения и глобальный объект для этого контекста. JavaScript
• document содержит DOM, инициализированный при разборе HTML
• screen описывает физическое отображение на весь экран

См. Ссылки на W3C и Mozilla для получения подробной информации об этих объектах. Основное соотношение между тремя заключается в том, что каждая вкладка браузера имеет свое собственное window , а window имеет свойства window.document и window.screen . На вкладке браузера window является глобальным контекстом, поэтому document и screen , обратитесь к window.document и window.screen . Более подробная информация о трех объектах приведена ниже, после Flanagan JavaScript: Полное руководство.

window

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

• setTimeout() и setInterval() привязывают обработчики событий к таймеру
• location дающее текущий URL
• history с методами back() и forward() предоставляющими изменяемую вкладку истории
• navigator описывающий программное обеспечение браузера

document

У каждого объекта window есть объект document который будет представлен. Эти объекты частично запутываются, потому что HTML-элементы добавляются в глобальный объект при назначении уникального идентификатора. Например, во фрагменте HTML

На элемент абзаца можно ссылаться любым из следующих:

• window.holyCow или window[«holyCow»]
• document.getElementById(«holyCow»)
• document.body.firstChild
• document.body.children[0]

screen

У window объекта также есть screen объект со свойствами, описывающими физическое отображение:

Свойства экрана: width и height — полный экран

Свойства экрана. availWidth и availHeight опустить панель инструментов.

Часть экрана, отображающая визуализированный документ, является областью просмотра в JavaScript, что может сбивать с толку, поскольку мы называем часть экрана приложения окном, когда говорим о взаимодействии с операционной системой. Метод getBoundingClientRect() любого элемента document возвращает объект со свойствами top , left , bottom и right описывающими расположение элемента в области просмотра.

Страница: DOMContentLoaded, load, beforeunload, unload

У жизненного цикла HTML-страницы есть три важных события:

• DOMContentLoaded – браузер полностью загрузил HTML, было построено DOM-дерево, но внешние ресурсы, такие как картинки и стили, могут быть ещё не загружены.
• load – браузер загрузил HTML и внешние ресурсы (картинки, стили и т.д.).
• beforeunload/unload – пользователь покидает страницу.

Каждое из этих событий может быть полезно:

• Событие DOMContentLoaded – DOM готов, так что обработчик может искать DOM-узлы и инициализировать интерфейс.
• Событие load – внешние ресурсы были загружены, стили применены, размеры картинок известны и т.д.
• Событие beforeunload – пользователь покидает страницу. Мы можем проверить, сохранил ли он изменения и спросить, на самом ли деле он хочет уйти.
• unload – пользователь почти ушёл, но мы всё ещё можем запустить некоторые операции, например, отправить статистику.

Давайте рассмотрим эти события подробнее.

DOMContentLoaded

Событие DOMContentLoaded срабатывает на объекте document .

Мы должны использовать addEventListener , чтобы поймать его:

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

Но он не дожидается, пока загрузится изображение. Поэтому alert покажет нулевой размер.

На первый взгляд событие DOMContentLoaded очень простое. DOM-дерево готово – получаем событие. Хотя тут есть несколько особенностей.

DOMContentLoaded и скрипты

Когда браузер обрабатывает HTML-документ и встречает тег

В примере выше мы сначала увидим «Библиотека загружена…», а затем «DOM готов!» (все скрипты выполнены).

Есть два исключения из этого правила:

1. Скрипты с атрибутом async , который мы рассмотрим немного позже, не блокируют DOMContentLoaded.
2. Скрипты, сгенерированные динамически при помощи document.createElement(‘script’) и затем добавленные на страницу, также не блокируют это событие.

DOMContentLoaded и стили

Внешние таблицы стилей не затрагивают DOM, поэтому DOMContentLoaded их не ждёт.

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

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

Так как DOMContentLoaded дожидается скриптов, то теперь он так же дожидается и стилей перед ними.

Встроенное в браузер автозаполнение

Firefox, Chrome и Opera автоматически заполняют поля при наступлении DOMContentLoaded .

Например, если на странице есть форма логина и пароля и браузер запомнил значения, то при наступлении DOMContentLoaded он попытается заполнить их (если получил разрешение от пользователя).

Так что, если DOMContentLoaded откладывается из-за долгой загрузки скриптов, в свою очередь – откладывается автозаполнение. Вы наверняка замечали, что на некоторых сайтах (если вы используете автозаполнение в браузере) поля логина и пароля не заполняются мгновенно, есть некоторая задержка до полной загрузки страницы. Это и есть ожидание события DOMContentLoaded .

window.onload

Событие load на объекте window наступает, когда загрузилась вся страница, включая стили, картинки и другие ресурсы.

В примере ниже правильно показаны размеры картинки, потому что window.onload дожидается всех изображений:

window.onunload

Когда посетитель покидает страницу, на объекте window генерируется событие unload . В этот момент стоит совершать простые действия, не требующие много времени, вроде закрытия связанных всплывающих окон.

Обычно здесь отсылают статистику.

Предположим, мы собрали данные о том, как используется страница: клики, прокрутка, просмотры областей страницы и так далее.

Естественно, событие unload – это тот момент, когда пользователь нас покидает и мы хотим сохранить эти данные.

Для этого существует специальный метод navigator.sendBeacon(url, data) , описанный в спецификации https://w3c.github.io/beacon/.

Он посылает данные в фоне. Переход к другой странице не задерживается: браузер покидает страницу, но всё равно выполняет sendBeacon .

Его можно использовать вот так:

• Отсылается POST-запрос.
• Мы можем послать не только строку, но так же формы и другие форматы, как описано в главе Fetch, но обычно это строковый объект.
• Размер данных ограничен 64 Кб.

К тому моменту, как sendBeacon завершится, браузер наверняка уже покинет страницу, так что возможности обработать ответ сервера не будет (для статистики он обычно пустой).

Для таких запросов с закрывающейся страницей есть специальный флаг keepalive в методе fetch для общих сетевых запросов. Вы можете найти больше информации в главе Fetch API.

Если мы хотим отменить переход на другую страницу, то здесь мы этого сделать не сможем. Но сможем в другом месте – в событии onbeforeunload .

window.onbeforeunload

Если посетитель собирается уйти со страницы или закрыть окно, обработчик beforeunload попросит дополнительное подтверждение.

Если мы отменим это событие, то браузер спросит посетителя, уверен ли он.

Вы можете попробовать это, запустив следующий код и затем перезагрузив страницу:

По историческим причинам возврат непустой строки так же считается отменой события. Когда-то браузеры использовали её в качестве сообщения, но, как указывает современная спецификация, они не должны этого делать.

Поведение было изменено, потому что некоторые веб-разработчики злоупотребляли этим обработчиком события, показывая вводящие в заблуждение и надоедливые сообщения. Так что, прямо сейчас старые браузеры всё ещё могут показывать строку как сообщение, но в остальных – нет возможности настроить показ сообщения пользователям.

readyState

Что произойдёт, если мы установим обработчик DOMContentLoaded после того, как документ загрузился?

Естественно, он никогда не запустится.

Есть случаи, когда мы не уверены, готов документ или нет. Мы бы хотели, чтобы наша функция исполнилась, когда DOM загрузился, будь то сейчас или позже.

Свойство document.readyState показывает нам текущее состояние загрузки.

Есть три возможных значения:

• «loading» – документ загружается.
• «interactive» – документ был полностью прочитан.
• «complete» – документ был полностью прочитан и все ресурсы (такие как изображения) были тоже загружены.

Так что мы можем проверить document.readyState и, либо установить обработчик, либо, если документ готов, выполнить код сразу же.

Например, вот так:

Также есть событие readystatechange , которое генерируется при изменении состояния, так что мы можем вывести все эти состояния таким образом:

Событие readystatechange – альтернативный вариант отслеживания состояния загрузки документа, который появился очень давно. На сегодняшний день он используется редко.

Для полноты картины давайте посмотрим на весь поток событий:

Здесь документ с , и обработчиками, которые логируют события:

Рабочий пример есть в песочнице.

1. [1] начальный readyState:loading
2. [2] readyState:interactive
3. [2] DOMContentLoaded
4. [3] iframe onload
5. [4] img onload
6. [4] readyState:complete
7. [4] window onload

Цифры в квадратных скобках обозначают примерное время события. События, отмеченные одинаковой цифрой, произойдут примерно в одно и то же время (± несколько миллисекунд).