Я вижу, что эти термины используются взаимозаменяемо как глобальная среда для DOM. В чем разница (если есть), и когда я должен использовать каждый из них?
В чем разница между окном, экраном и документом в Javascript?
Ответ 1
Window
является основным корнем объекта JavaScript, который является глобальным объектом в браузере, также может рассматриваться как корень объектной модели документа. Вы можете получить к нему доступ как Window
в большинстве случаев (в браузере);
window.screen
- это небольшой информационный объект о физических размерах экрана.
window.document
или просто document
является основным объектом видимой (или лучше еще: визуализированной) объектной модели документа/DOM.
Ответ 2
Ну, окно - это первое, что загружается в браузер. Этот объект окна имеет большинство свойств, таких как length, innerWidth, innerHeight, name, если он был закрыт, его родители и т.д.
Как насчет объекта документа? Объектом документа является ваш html, aspx, php или другой документ, который будет загружен в браузер. Документ фактически загружается внутри объекта окна и имеет доступные ему свойства, такие как заголовок, URL, cookie и т.д. Что это значит? Это означает, что если вы хотите получить доступ к свойству для окна, то это window.property, если это документ, это window.document.property, который также доступен короче как document.property.
Это кажется достаточно простым. Но что происходит, когда вводится IFRAME?
Ответ 3
window
- это фактический глобальный объект.
screen
- это экран, он содержит свойства пользовательского дисплея.
document
находится где DOM.
Ответ 4
Вкратце, с более подробной информацией ниже,
-
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
верхнего уровня. Каждый элемент <iframe>
(и устаревший <frame>
) также имеет свой собственный объект 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
<body>
<p id="holyCow"> This is the first paragraph.</p>
</body>
На элемент абзаца можно ссылаться любым из следующих:
-
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
описывающими расположение элемента в области просмотра.
Ответ 5
window
содержит все, поэтому вы можете вызвать window.screen
и window.document
, чтобы получить эти элементы. Проверьте эту скрипту, довольно-печатайте содержимое каждого объекта: http://jsfiddle.net/JKirchartz/82rZu/
Вы также можете увидеть содержимое объекта в инструментах firebug/dev, например:
console.dir(window);
console.dir(document);
console.dir(screen);
window
- это корень всего, screen
просто имеет размер экрана, а document
- это верхний объект DOM. поэтому вы можете думать об этом как window
как супер-document
...
Ответ 6
Окно - это первое, что загружается в браузер. Этот объект окна имеет большинство свойств, таких как length, innerWidth, innerHeight, name, если он был закрыт, его родители и т.д.
Объектом document является ваш html, aspx, php или другой документ, который будет загружен в браузер. Документ фактически загружается внутри объекта окна и имеет доступные ему свойства, такие как заголовок, URL, cookie и т.д. Что это значит? Это означает, что если вы хотите получить доступ к свойству для окна, то это window.property, если это документ, это window.document.property, который также доступен короче как document.property.
Ответ 7
Вот некоторая картина, которая объясняет разницу http://eligeske.com/wp-content/uploads/2011/01/javascript_dom_1.jpg взято из http://eligeske.com/jquery/what-is-the-difference-between-document-and-window-objects-2/