¿Qué es una ventana de JavaScript?
La ventana está en un nivel raíz/superior en la jerarquía de objetos de JavaScript. Es un objeto global/raíz en JavaScript y es el objeto raíz del modelo de objetos del documento (DOM);
¿Qué es un documento JavaScript?
Un documento es un objeto dentro del objeto de ventana y usamos un objeto de documento para la manipulación dentro del documento.
Lo primero que se carga en el navegador es la ventana y las propiedades relacionadas con esa ventana se almacenan en el objeto de la ventana. Las propiedades relacionadas con los objetos de ventana son longitud, anchura interior, altura interior, cachés, etc.
También había un objeto de documento, entonces, ¿qué pasa con eso?
Entonces, después de que se carga la ventana, hay un documento (HTML, PHP u otro documento) cargado dentro de esa ventana, y las propiedades relacionadas con ese documento se almacenan en el objeto del documento. Las propiedades relacionadas con los objetos del documento son título, URL, cookie, etc.
Sintaxis:
- objeto de ventana:
window.propertyname;
- objeto del documento:
document.propertyname // OR window.document.propertyname
Ejemplo 1: Centrarse en el objeto de la ventana.
Javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1></h1>
<p id="innerheight"></p>
<p id="innerwidth"></p>
<script>
window.document.bgColor = "aqua";
const height = document.getElementById('innerheight');
const width = document.getElementById('innerwidth');
window.document.querySelector('h1').textContent =
"Welcome to window object";
height.textContent = "innerheight - " +
window.innerHeight;
width.textContent = "innerwidth - " +
window.innerWidth;
</script>
</body>
</html>
Producción:
centrado en el objeto de la ventana
Ejemplo 2: Centrarse en el objeto del documento.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document object</title>
</head>
<body style="color:white">
<h1></h1>
<p class="details"></p>
<p class="details"></p>
<p class="details"></p>
<script>
document.bgColor = "rgb(89, 135, 235)";
const text = prompt('enter the text to appear on screen');
const h1 = document.querySelector('h1');
h1.textContent = text;
const p = document.getElementsByClassName('details');
p[0].textContent = "document type:" +
document.contentType;
p[1].textContent = "url :" + document.bgColor;
p[2].textContent = "title :" + document.title;
</script>
</body>
</html>
Producción:
centrado en el objeto del documento
Documento |
Ventana |
| Representa el documento cargado dentro de la ventana o navegador. | Representa la ventana del navegador en la que está viendo el contenido. |
| Las propiedades relacionadas con él se almacenan en el objeto del documento. | Las propiedades relacionadas con él se almacenan en el objeto de ventana. |
| Se carga después de la ventana de carga porque la ventana contiene un documento. | Se carga antes que el documento porque es un documento contenedor de ventana. |
| Es el elemento raíz del modelo de objeto del documento. | La ventana es el elemento global de todos los objetos, funciones, etc. |
| Es un objeto de ventana. | Es un objeto del navegador. |
| No podemos acceder a las propiedades de los objetos de Windows dentro del documento. | Podemos acceder a las propiedades del objeto del documento dentro de la ventana. |
|
lógicamente: Propiedades del documento} |
lógicamente: ventana:{ |
| Ejemplo: document.title devolverá el título del documento | Ejemplo: window.document.title devolverá el título del documento. |
Publicación traducida automáticamente
Artículo escrito por nachiketmh7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA