¿Cuál es la diferencia entre ventana, pantalla y documento en Javascript?

Question

Veo que estos términos se usan indistintamente como el entorno global para el DOM. ¿Cuál es la diferencia (si hay una) y cuándo debo usar cada una?

Answer 1

Window es la raíz del objeto JavaScript principal, también conocido como el objeto global en un navegador, también se puede tratar como la raíz del modelo de objetos del documento. Puede acceder a él como window en la mayoría de los casos (en el navegador);

window.screen es un pequeño objeto de información sobre las dimensiones de la pantalla física.

window.document o simplemente document es el objeto principal del modelo de objeto de documento visible (o mejor aún: representado)/DOM.

Answer 2

El window es el objeto global real.

El screen es la pantalla, contiene propiedades sobre la pantalla del usuario.

El document es donde está el DOM.

Answer 3

window contiene todo, por lo que puede llamar al window.screen y window.document para obtener esos elementos. Echa un vistazo a este violín, bastante-imprimir el contenido de cada objeto: http://jsfiddle.net/JKirchartz/82rZu/

también se puede ver el contenido del objeto en herramientas de Firebug/dev así:

console.dir(window); 
console.dir(document); 
console.dir(screen); 

window es la raíz de todo, screen solo tiene dimensiones de pantalla, y document es el principal objeto DOM. por lo que se puede pensar en ello como window ser como un super-document ...

Answer 4

La ventana es lo primero que se carga en el navegador. Este objeto de ventana tiene la mayoría de las propiedades, como length, innerWidth, innerHeight, name, si se ha cerrado, sus padres y más.

El documento objeto es su html, aspx, php u otro documento que se cargará en el navegador. El documento realmente se carga dentro del objeto ventana y tiene propiedades disponibles como título, URL, cookie, etc. ¿Qué significa esto realmente? Esto significa que si desea acceder a una propiedad para la ventana, es window.property, si es un documento, es window.document.property, que también está disponible en breve como document.property.

• Ver más en: http://eligeske.com/jquery/what-is-the-difference-between-document-and-window-objects-2/#sthash.CVkTMIL7.dpuf

Answer 5

Bueno, la ventana es lo primero que se carga en el navegador. Este objeto de ventana tiene la mayoría de las propiedades, como length, innerWidth, innerHeight, name, si se ha cerrado, sus padres y más.

¿Qué pasa con el objeto del documento? El objeto del documento es su html, aspx, php u otro documento que se cargará en el navegador. El documento realmente se carga dentro del objeto ventana y tiene propiedades disponibles como título, URL, cookie, etc. ¿Qué significa esto realmente? Eso significa que si desea acceder a una propiedad para la ventana, es window.property, si es document es window.document.propiedad que también está disponible en breve como document.property.

Eso parece bastante simple. Pero, ¿qué sucede una vez que se introduce un IFRAME?

• Ver más en: http://eligeske.com/jquery/what-is-the-difference-between-document-and-window-objects-2/#sthash.CwLGOk9c.dpuf

Answer 6

En pocas palabras, con más detalle a continuación,

• window es el contexto de ejecución y el objeto global para ese contexto de JS
• document contiene el HTML
• screen describe pantalla completa de la pantalla física

Ver W3C y Mozilla referencias para detalles acerca de estos objetos. La relación más básica entre las tres es que cada pestaña del navegador tiene su propia window, y window tiene propiedades window.document y window.screen. La pestaña del navegador window es el contexto global, por lo que document y screen se refieren a window.document y window.screen. Más detalles sobre los tres objetos están debajo, siguiendo Flanagan's JavaScript: Definitive Guide.

window

Cada pestaña del navegador tiene su propio nivel superior window objeto. Cada elemento (y obsoleto <frame>) también tiene su propio objeto window, anidado dentro de una ventana principal. Cada una de estas ventanas obtiene su propio objeto global por separado. window.window siempre se refiere a window, pero window.parent y window.top pueden referirse a las ventanas adjuntas, dando acceso a otros contextos de ejecución. Además de document y screen se describe a continuación, window propiedades incluyen

• setTimeout() y setInterval() controladores de eventos de unión a un temporizador
• location dando la URL actual
• history con métodos back() y forward() dando la historia mutable de la pestaña
• navigator que describe el software del navegador

document

Cada objeto window tiene un objeto document a ser prestados. Estos objetos se confunden en parte porque los elementos HTML se agregan al objeto global cuando se les asigna una ID única. P.ej., En el fragmento de HTML

<body> 
    <p id="holyCow"> This is the first paragraph.</p> 
</body> 

el elemento de párrafo se puede hacer referencia por cualquiera de los siguientes:

• window.holyCow o window["holyCow"]
• document.getElementById("holyCow")
• document.body.firstChild
• document.body.children[0]

screen

El objeto window también tiene un objeto screen con propiedades que describen la pantalla física:

• propiedades de la pantalla width y height son la pantalla completa

• propiedades de la pantalla availWidth y availHeight omiten el barra de herramientas

La parte de una pantalla que muestra el documento renderizado es viewport en JavaScript, lo que es potencialmente confuso porque llamamos a la porción de la pantalla una ventana cuando hablamos de interacciones con el sistema operativo. El método getBoundingClientRect() de cualquier elemento document devolverá un objeto con las propiedades top, left, bottom y right que describen la ubicación del elemento en la ventana gráfica.