Diferencias entre objetos de documento y ventana

En este artículo, veremos el objeto Documento y el objeto Ventana, sus diversas propiedades y métodos, además de conocer su implementación y las diferencias entre ellos.

Objeto de documento: El objeto de documento representa una página web que se carga en el navegador. Al acceder al objeto del documento, podemos acceder al elemento en la página HTML. Con la ayuda de objetos de documento, podemos agregar contenido dinámico a nuestra página web. Se puede acceder al objeto de documento con una ventana.documento o simplemente documento.

Sintaxis:

document.property_name;

Las propiedades de los objetos de documento que se usan comúnmente se enumeran en la siguiente tabla:

Propiedades del documento:

• activeElement : Devuelve los elementos actualmente activos en el documento.
• body : Devuelve el contenido del elemento body.
• anclas : Devuelve todos los elementos <a> que tienen un atributo de nombre.
• baseURI : Devuelve un valor de string que representa la URI base del documento.
• cookie : Devuelve la cookie del documento actual.
• charSet : devuelve una string que representa la codificación de caracteres del documento.
• defaultView : devuelve el objeto de ventana actual.
• designMode : se utiliza para configurar los documentos como editables o de solo lectura.
• dominio : Devuelve el nombre de dominio del servidor de documentos.
• doctype : Devuelve el doctype del documento.
• embeds : Devuelve la colección de todos los elementos incrustados.
• URL : Devuelve la URL completa del documento.
• Forms : Devuelve todos los elementos del formulario.
• fullScreenElement : Devuelve el elemento que está actualmente presente en modo de pantalla completa.
• title : Devuelve el elemento de título del documento.
• head : Devuelve el elemento head del documento.
• links : Devuelve todos los elementos <area> y <a> que tienen un atributo href.
• lastModified : Devuelve la fecha y hora del documento actual que fue modificado por última vez.
• images : Devuelve la colección de elementos <img> en el documento.
• implementación : Devuelve el objeto DOMImplementation asociado al documento actual.
• readyState : Devuelve el estado de carga del documento actual.
• referrer : Devuelve la URI de la página que está enlazada a la página actual.
• scripts : Devuelve todos los elementos del script presentes en el documento.
• strictErrorChecking : establece o devuelve si se puede aplicar o no una verificación estricta de errores en un documento.

Métodos de Documento:

Sintaxis:

document.method_name;

Las listas de los métodos más utilizados se enumeran a continuación:

• addEventListener() : se utiliza para adjuntar un controlador de eventos al elemento especificado.
• adoptNode() : Se utiliza para adoptar un Node de otro documento y devuelve un objeto de Node, que representa el Node adoptado.
• close() : se utiliza para cerrar el flujo de salida.
• createAttribute() : se utiliza para crear un Node de atributo con el nombre especificado y devuelve el objeto de atributo.
• createComment() : se utiliza para crear un Node de comentario con algún texto.
• createDocumentFragment() : se utiliza para crear el fragmento del documento para cambiar el contenido del documento.
• createElement() : se utiliza para crear elementos HTML.
• createEvent() : Se utiliza para crear un nuevo objeto de eventos.
• createTextNode() : se utiliza para crear un Node de texto.
• execCommand() : Se utiliza para ejecutar un comando especificado por el usuario en la sección editable seleccionada. Devuelve un valor booleano.
• fullscreenEnabled() : se utiliza para verificar si el documento se puede ver en modo de pantalla completa o no. Devuelve un valor booleano.
• getElementById() : Devuelve el objeto del ID dado. Si no existe ningún objeto con esa identificación, devuelve nulo.
• getElementsByClassName() : Devuelve un objeto que contiene todos los elementos con los nombres de clase especificados en el documento como objetos.
• getElementsByName() : Devuelve un objeto que contiene todos los elementos con el nombre especificado en el documento como objetos.
• getElementsByTagName() : Devuelve un objeto que contiene todos los elementos con los nombres de etiqueta especificados en el documento como objetos.
• hasFocus() : Devuelve un valor booleano que indica si el documento o elemento tiene foco o no.
• importNode() : Importa la copia de un Node de otro documento en el documento actual.
• normalize() : Elimina los Nodes vacíos y fusiona los Nodes de texto adyacentes con el primer Node de texto y
• normalizeDocument() : se utiliza para normalizar un documento HTML eliminando los Nodes de texto vacíos y uniendo los Nodes de texto adyacentes.
• open() : se utiliza para abrir el flujo de salida para recopilar la salida.
• querySelector() : devuelve el primer elemento que coincide con un selector CSS especificado en el documento.
• querySelectorAll() : devuelve una colección de elementos secundarios de un elemento que coincide con un selector CSS específico en el documento
• removeEventListener() : elimina el controlador de eventos de un elemento que tiene un evento adjunto.
• renameNode() : Se utiliza para cambiar el nombre del Node.
• write() : se utiliza para escribir algún contenido o código javascript en el documento.
• writeln() : se utiliza para escribir un documento con un carácter de nueva línea después de cada declaración.

Ejemplo: Este ejemplo describe la implementación de document.object.

<!DOCTYPE html>
<html>
 
<head>
    <title>document's Properties</title>
    <style>
      h1 {
          color: green;
      }
    </style>
</head>
 
<body>
    <h1> GeeksforGeeks</h1>
    <button onclick="myFunction()">CLICK ME</button>
    <p id="demo"></p>
 
 
    <script>
        function myFunction() {
            var title = document.title;
            var domain = document.domain;
            var body = document.body;
            document.getElementById("demo").innerHTML =
            "the title of the document is : "
            + title
            + "<br>"
            + "domain : "
            + domain
            + "<br>"
            + "body : "
            + body;
        }
    </script>
</body>
 
</html>

Producción:

Objeto de ventana: el objeto de ventana es el objeto superior de la jerarquía DOM. Representa una ventana o marco del navegador que muestra el contenido de la página web. Cada vez que aparece una ventana en la pantalla para mostrar el contenido del documento, se crea el objeto de ventana. 

Sintaxis:

window.property_name;

Las propiedades de los objetos de ventana que se usan comúnmente se enumeran en la siguiente tabla:

Propiedades de la ventana:

• Cerrado : Tiene un valor booleano que representa si la ventana está cerrada o no.
• consola : devuelve una referencia al objeto de la consola que proporciona acceso a la consola de depuración del navegador.
• defaultStatus : se utiliza para definir el mensaje predeterminado que se mostrará en la barra de estado cuando el navegador no realice ninguna actividad.
• controllers : Devuelve los objetos del controlador XUL para la ventana actual de Chrome.
• customElements : Devuelve una referencia al objeto CustomElementRegistry, que se puede utilizar para registrar nuevos elementos personalizados y también obtener información sobre elementos personalizados ya registrados.
• crypto : Devuelve el objeto criptográfico del navegador.
• devicePixelRatio : Devuelve la relación entre los píxeles físicos y los píxeles independientes del dispositivo en la pantalla actual.
• Documento : Devuelve una referencia al objeto documento de esa ventana.
• DOMMatrix : Devuelve una referencia a un objeto DOMMatrix, que representa arrays de 4×4, adecuadas para operaciones 2D y 3D.
• frames[] : Representa una array que contiene todos los marcos de una ventana determinada.
• DOMPoint : Devuelve una referencia a un objeto DOMPoint, que representa un punto 2D o 3D en un sistema de coordenadas.
• Historial : Proporciona información sobre las URL visitadas en la ventana actual.
• Duración : Representa el número de cuadros en la ventana actual.
• DOMRect : Devuelve una referencia a un objeto DOMRect, que representa un rectángulo.
• fullScreen : esta propiedad indica si la ventana se muestra en pantalla completa o no.
• Ubicación : Contiene la URL de la ventana actual.
• innerHeight : se utiliza para obtener la altura del área de contenido de la ventana del navegador.
• innerWidth : se utiliza para obtener el ancho del área de contenido de la ventana del navegador.
• Nombre : Contiene el nombre de la ventana referenciada.
• Ventana : Devuelve la ventana o marco actual.
• Navegador : Devuelve una referencia al objeto navegador.
• outerHeight : Obtendrá la altura del exterior de la ventana del navegador.
• outsideWidth : Obtendrá el ancho del exterior de la ventana del navegador.
• Estado : anula el estado predeterminado y coloca un mensaje en la barra de estado.
• Top : Devuelve una referencia a la ventana superior que contiene un marco si se abren muchas ventanas.
• Barra de herramientas : dará como resultado el objeto de la barra de herramientas, cuya visibilidad se puede alternar en la ventana.
• Abridor : Contiene una referencia a la ventana que abrió la ventana actual.
• Padre : se refiere al conjunto de marcos en el que está contenido el marco actual.
• Pantalla : Se refiere al objeto de pantalla.
• Self : Proporciona otra forma de referirse a la ventana actual.

Métodos de ventana:

Sintaxis:

window.method_name;

Los métodos de los objetos de ventana que se usan comúnmente se enumeran en la siguiente tabla:

• alert() : se utiliza para mostrar un cuadro de alerta. Muestra un mensaje específico junto con un botón Aceptar y generalmente se usa para asegurarse de que la información llegue a través del usuario.
• atob() : se utiliza para decodificar una string codificada en base 64. Se utiliza para decodificar una string de datos que se ha codificado mediante el método btoa().
• blur() : se utiliza para eliminar el foco de la ventana actual.
• btoa() : se utiliza para codificar una string en formato base-64.
• clearInterval() : Borra el intervalo que ha sido establecido por la función setInterval() antes de eso.
• clearTimeout() : borra el tiempo de espera establecido por la función setTimeout() antes de eso.
• close() : Se utiliza para cerrar una determinada ventana o pestaña del navegador que se abrió previamente.
• confirm() : se utiliza para mostrar un cuadro de diálogo modal con un mensaje opcional y dos botones, es decir, Aceptar y Cancelar. Devuelve verdadero si el usuario hace clic en «Aceptar» y falso en caso contrario.
• focus() : Se utiliza para dar foco a un elemento en la ventana actual.
• getComputedStyle() : se utiliza para obtener todas las propiedades y valores CSS calculados del elemento especificado.
• getSelection() : Devuelve un objeto Selection que representa el rango de texto seleccionado por el usuario
• matchMedia() : se utiliza para devolver un objeto MediaQueryList que representa el resultado de la string de consulta de medios CSS especificada.
• open() : se utiliza para abrir una nueva pestaña o ventana con la URL y el nombre especificados.
• moveBy() : se usa para mover una ventana con un número específico de píxeles en relación con sus coordenadas actuales.
• moveTo() : ​​se usa en la ventana para mover la ventana desde las coordenadas izquierda y superior.
• prompt() : se utiliza para mostrar un cuadro de diálogo con un mensaje opcional que solicita al usuario que ingrese algún texto
• resizeBy() : se utiliza para cambiar el tamaño de una ventana en la cantidad especificada.
• resizeTo() : se utiliza para cambiar el tamaño de una ventana al ancho y alto especificados.
• scrollBy() : se utiliza para desplazar el documento por el número dado de píxeles.
• scrollTo() : se utiliza para desplazarse a un conjunto particular de coordenadas en el documento.
• setInterval() : Repite una función dada en cada intervalo de tiempo dado.
• setTimeout() : Ejecuta una función, después de esperar un número específico de milisegundos.
• stop() : se utiliza para evitar que la ventana cargue recursos en el contexto de navegación actual.

Ejemplo: Este ejemplo describe la implementación de window.object.

<!DOCTYPE html>
<html>
 
<head>
    <title> Window's Properties</title>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <button onclick="show()">Check</button>
    <p id="prop"></p>
 
 
    <script>
        function show() {
            var h = window.innerHeight;
            var w = window.innerWidth;
            var l = window.location;
            var c = window.closed;
            document.getElementById("prop").innerHTML =
            "Frame's Height: "
            + h + "<br>"
            + "Frame's Width: "
            + w + "<br>"
            + "Window location:"
            + l
            + "<br>"
            + "Window Closed: "
            + c;
        }
    </script>
</body>
 
</html>

Producción:

Diferencia entre documento y ventana: