BOD

Browser Object Model

Permite modificar las propiedades de las ventanas del propio navegador. 

window

Representa la ventana completa del navegador.

window.open(URL[,name,spec])

Permite crear una nueva ventana en la cual se mostrara la pagina a la que lleve la URL

<button id="google"> Abrir Google AR</button>

<script>
    
    var boton = document.querySelector("#google");

    boton.addEventListener("click", function(){
        window.open("wwww.google.com.ar");
    });

</script>

window.close()

Cierra la ventana del navegador.

<button id="crear"> Abrir Google AR</button>
<button id="cerrar"> Cerrar a Google</button>

<script>
    
    var botonCrear = document.querySelector("#crear");
    var botonCerrar = document.querySelector("#cerrar");
    var nuevaVenta;

    botonCrear.addEventListener("click", function(){
        nuevaVenta = window.open("wwww.google.com.ar");
    });

    botonCerrar.addEventListener("click", function(){
        nuevaVenta.close();
    });

</script>

window.moveBy(x,y)

Desplaza la posición de la ventana x pixeles hacia la derecha e y pixeles hacia abajo.

<button id="crear"> Abrir Google AR</button>
<button id="mover"> Mover a Google</button>

<script>
    
    var botonCrear = document.querySelector("#crear");
    var botonMover = document.querySelector("#crear");
    var nuevaVentana;

    botonCrear.addEventListener("click", function(){
       nuevaVentana = window.open("","","width=150px, height=150px");
       nuevaVentana.document.body.innerHTML = "<p>Hola Mundo!</p>";
    });

    botonMover.addEventListener("click", function(){
        nuevaVentana.moveBy(15,15);
    });

</script>

window.moveTo(x,y)

Desplaza la posición la esquina superior derecha de la ventana hasta la posicion x e y.

<button id="crear"> Abrir Google AR</button>
<button id="mover"> Mover a Google</button>

<script>
    
    var botonCrear = document.querySelector("#crear");
    var botonMover = document.querySelector("#crear");
    var nuevaVentana;

    botonCrear.addEventListener("click", function(){
       nuevaVentana = window.open("","","width=150px, height=150px");
       nuevaVentana.document.body.innerHTML = "<p>Hola Mundo!</p>";
    });

    botonMover.addEventListener("click", function(){
        nuevaVentana.moveTo(15,15);
    });

</script>

window.resizeBy(x,y)

Redimensiona la ventana del navegador de forma que su nueva anchura se incremente en x y su altura se incremente en y.

<button id="crear"> Abrir Google AR</button>
<button id="redimencionar"> Redimencionar a Google</button>

<script>
    
    var botonCrear = document.querySelector("#crear");
    var botonRedimencionar = document.querySelector("#redimencionar");
    var nuevaVentana;

    botonCrear.addEventListener("click", function(){
       nuevaVentana = window.open("","","width=150px, height=150px");
       nuevaVentana.document.body.innerHTML = "<p>Hola Mundo!</p>";
    });

    botonRedimencionar.addEventListener("click", function(){
        nuevaVentana.resizeBy(100,150);
    });

</script>

window.resizeTo(x,y)

Redimensiona la ventana del navegador de forma tal que su anchura sea igual a x y su altura sea igual a y.

<button id="crear"> Abrir Google AR</button>
<button id="redimencionar"> Redimencionar a Google</button>

<script>
    
    var botonCrear = document.querySelector("#crear");
    var botonRedimencionar = document.querySelector("#redimencionar");
    var nuevaVentana;

    botonCrear.addEventListener("click", function(){
       nuevaVentana = window.open("","","width=150px, height=150px");
       nuevaVentana.document.body.innerHTML = "<p>Hola Mundo!</p>";
    });

    botonRedimencionar.addEventListener("click", function(){
        nuevaVentana.resizeTo(100,150);
    });

</script>

Resolución - Internet Explorer

Resolución - Oros Navegadores

document

Es el único objeto que pertenece a tanto al DOM como al BOM. Este  proporciona información sobre la página HTML.

<button> Mostrar Info </button>

<script>
    
    var boton = document.querySelector("button");

    boton.addEventListener("click", function(){
	
        console.log(document.title);
	document.title = "Ejemplo del document";
	console.log(document.title);
	console.log(document.URL);
	console.log(document.referrer)
	console.log(document.lastModified);
    
    });

</script>

Ver Ejemplo

document.anchors

Es un array que contiene todos los <a> de la página.

<a name="1"> Link 1 </a>
<a name="2"> Link 2 </a>
<a name="3"> Link 3 </a>
<a> Link 4 </a>
<button> Mostrar Anchors </button>

<script>
    var boton = document.querySelector("button");

    boton.addEventListener("click", function(){

	console.log(document.anchors);
    
    });

</script>

Ver Ejemplo

document.images

Es un array que contiene todos los <img> de la página.

<img src="images/uno.png">
<img src="images/dos.png">
<img src="images/tres.png">
<button> Mostrar Imagenes </button>

<script>
    var boton = document.querySelector("button");

    boton.addEventListener("click", function(){

	console.log(document.images);
    
    });

</script>

Ver Ejemplo

document.link

Es un array que contiene todos los links de la página.

<a href="#1"> Link 1 </a>
<a href="#2"> Link 2 </a>
<a href="#3"> Link 3 </a>
<a> Link 4 </a>
<button> Mostrar Links </button>

<script>
    var boton = document.querySelector("button");

    boton.addEventListener("click", function(){

	console.log(document.links);
    
    });

</script>

Ver Ejemplo

location

Provee información respecto a la URL de la página HTML

http://www.sitio.com:80/acerca/pagina.html#uno

location.assign(URL)

Permite modificar la URL actual

<button> Cambiar a Google </button>

<script>

    var boton = document.querySelector("button");

    boton.addEventListener("click", function(){

	location.assign(“www.google.com.ar”);

    });

</script>

Ver Ejemplo

location.replace(URL)

Permite remplazar la URL actual eliminando la anterior del historial de navegacion

<button> Cambiar a Google </button>

<script>

    var boton = document.querySelector("button");

    boton.addEventListener("click", function(){

	location.replace(“www.google.com.ar”);

    });

</script>

Ver Ejemplo

location.reload(bool)

Permite recargar nuestro sitio. Si el valor de bool es true, recargara del servidor, en cambio, si es false, lo hará del cache del navegador.

<button> Recargar </button>

<script>

    var boton = document.querySelector("button");

    boton.addEventListener("click", function(){

	location.reload(false);

    });

</script>

Ver Ejemplo

navigator

Permite obtener información respecto del navegador

screen

Permite obtener información respecto a la pantalla