trisquel

Aprende JavaScript con ejemplos (XXIV). El BOM (Browser Object Model).

bom

Diferencias entre DOM y BOM.
En artículos anteriores se estudiaba el DOM y se podía observar cómo JavaScript podía acceder a los elementos de un documento o página web mediante su estructura interna.
Con el BOM no se pueden acceder a ciertos aspectos del navegador como puede ser la URL, las dimensiones de la ventana (navegador), tampoco se podría cerrar o redimensionar la ventana del navegador, gestionar cookies, etc. Para ello se utiliza el BOM que es otra estructura arborescente parecida al DOM pero con otra serie de objetos.
A diferencia del DOM, el elemento raíz es el objeto window.

El BOM o Browser Object Model en su momento fué implementado por los navegadores para que JavaScript pudiese hacer uso de sus métodos y propiedades uniformemente.

Como se puede observar en la imagen, el objeto raíz del BOM es el objeto window el cual como hemos dicho está soportado por cualquier navegador y que a su vez contiene otros objetos de menor rango jerárquico como puede ser el objeto document (muy importante también) u otros.

El objeto document en el BOM y en el DOM
Como se puede observar, en el BOM existe un objeto document al igual que en el DOM. En el DOM, el objeto document es la raíz del árbol de objetos de la página web mientras que en el BOM se pueden acceder a propiedades como:

  • document.URL. Contiene la URL de la página web actual.
  • document.referrer. Contiene la URL desde que se accedió a la página actual.
  • document.title. Se accede al texto de la etiqueta <title> de la página web.
  • document.lastModified. Contiene la fecha de última modificación de la página web.

Por lo tanto podríamos ejecutar las siguientes líneas de código:

h = window.document.getElementById("header");

o bién:

h = document.getElementById("header");

Y el resultado de ambas líneas sería el mismo.

Veamos un ejemplo de script que muestra el ancho y alto de nuestro navegador.

Prueba a redimensionar el navegador y te darás cuenta que los números cambian.

<!DOCTYPE html>
<html>
<body>
<p id="dimension"></p>

<script>
var ancho = window.innerWidth;

var alto = window.innerHeight;

document.getElementById("dimension").innerHTML = "Ancho: " + ancho + " --- Alto: " + alto ;
</script>

</body>
</html>

Ejercicio 24.1:
Copia y ejecuta el ejemplo anterior. Prueba a cambiar las variables por estas otras:

  1. document.documentElement.clientWidth
  2. document.body.clientWidth
  3. document.documentElement.clientHeight
  4. document.body.clientHeight

¿Qué diferencia hay entre las variables anteriores?

Ejercicio 24.1:
Realiza una página web de ejemplo en el que incluyas los siguientes métodos:

window.open() – Abre una nueva ventana
window.close() – Cierra la ventana actual
window.moveTo() – Mueve la ventana actual
window.resizeTo() – Redimensiona la ventana actual

Ten en cuenta…
El navegador Internet Explorer es diferente a otros navegadores como Firefox, Safari u Opera. Siempre que utilices objetos del BOM comprueba que tu web funciona en Explorer y los demás navegadores.

3 thoughts on “Aprende JavaScript con ejemplos (XXIV). El BOM (Browser Object Model).

  1. Hola,
    estoy viendo el BOM en clase pero tengo algunas dudas al respecto.

    ¿Porque no todos los esquemas sobre el BOM son exactamente iguales o tienen los mismos objetos(en mi esquema no aparece los objetos document.layer y navigator.plugin y he visto esquemas donde existe el objeto document.location, ademas de window.location)?

    ¿Porque el objeto aparece como “frame”(al igual que document.imageS o document.formS) si accedo a el como “frames”(en una coleccion de objetos, un array))?

    var imgs=document.frameS;

  2. hola,
    desarrollo JS en Firefox/Chrome y necesito cerrar la ventana del navegador, el metodo close() me da error en Firefox, sin embargo si me funciona en Chrome ¿no deberia funcionar igual en ambos navegadores?

    Gracias, saludos:D

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>