trisquel

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

bom

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.

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

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>