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>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>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>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>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>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>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>navigator
Permite obtener información respecto del navegador
screen
Permite obtener información respecto a la pantalla
