La API del DOM es la API que nos permite manejar HTML con Javascript a través de los navegadores.
Elementos del documento
Como vimos en el capítulo anterior, el objeto padre de los navegadores es el objeto window, y de window cuelgan todas las APIs del navegador, entre ellas el DOM, que es la API que vamos a ver a lo largo de estos capítulos.
El DOM nos muestra el código HTML. Podemos imprimir en consola todo lo que cuelga de document, de la siguiente manera.
console.log(window.document); // O así console.log(document); // No es necesario especificar la palabra window
En clases más avanzadas guardaremos los elementos del DOM en variables para poder interactuar. Gracias a la notación del punto (.) es como vamos a ir accediendo a los nodos del DOM.
Mostrar el head (cabecera)
para acceder al <head> de nuestra página web hacemos lo siguiente.
console.log(document.head);
Mostrar el body (cuerpo)
Para acceder al cuerpo (<body>) de nuestra página web escribimos lo siguiente.
console.log(document.body);
Mostrar el tipo de documento
La siguiente sintaxis nos muestra el doctype de nuestra página HTML.
console.log(document.documentElement); // Otra manera console.log(document.doctype);
Juego de caracteres
Lo haríamos con la siguiente sintaxis.
console.log(document.charset);
Title
console.log(document.title);
Lista de enlaces
Si nuestro documento tuviera enlaces, la sintaxis sería.
console.log(document.links);
Imágenes
La sintaxis sería.
console.log(document.images);
Formularios
La sintaxis sería.
console.log(document.forms);
Hojas de estilo
Con la siguiente sintaxis se nos muestra una colección con las hojas de estilo del documento.
console.log(document.styleSheets);
Mostrar los scripts
Se muestran de la siguiente manera.
console.log(document.scripts);
Mostrar algo que hemos seleccionado
La sintaxis es:
console.log(document.getSelection().toString());
Escribir en el documento
Para ello tenemos un método que cuelga de document, denominado write(), que aunque no se considera buena práctica su uso, permite escribir al final de nuestro documento. Su sintaxis es.
document.write("<h2>Sutil Web</h2>");
En el siguiente capítulo comenzaremos a ver como interactuar con los nodos y elementos (etiquetas HTML).