En el futuro, me van a oír hablar mucho de un cierto acrónimo: DOM.
"Dom, dom, dom, dom".
DOM significa "Document Object Model" (Modelo de Objetos para representar Documentos),
y es la manera en la que los navegadores le permiten a los desarrolladores
manipular páginas web con JavaScript.
Cada vez que un navegador carga una página web, analiza todo el código HTML y CSS,
y convierte el documento en un DOM.
Ese DOM en realidad es un gran objeto de JavaScript,
que contiene todo lo que quisiéramos saber o cambiar sobre una página,
como cada etiqueta, atributo, y estilo para cada etiqueta.
Para acceder al DOM de una página web desde JavaScript,
usamos la variable gobal "document", y entonces podemos usar propiedades,
y llamar funciones que están ligadas a este objeto.
La estrategia general para manipular un DOM tiene dos pasos.
Permítanme hacer aquí una lista de esos pasos.
Aquí vamos, y luego tenemos el segundo paso.
Ahora vamos a revisar cada uno de estos pasos.
El primer paso consiste en encontrar el nodo DOM usando un método de acceso.
Si todo lo que estamos buscando es la etiqueta "", en realidad podemos acceder muy fácilmente,
simplemente escribiendo "document.body".
Y ahora el segundo paso es manipular el nodo DOM que encontramos,
mediante el cambio de sus atributos, estilos, el contenido de HTML,
o añadiendo nuevos nodos.
Así que si lo que queremos es reemplazar el contenido de la etiqueta entera,
entonces podemos usar la propiedad "innerHTML".
Entonces escribimos "document.body.innerHTML = 'Webpage be gone!';" ("La página se ha ido").
¡Tan tan! Lo hice.
El navegador revisa los cambios al objeto "document",
y tan pronto como ve que cambiaste el contenido de HTML de "document.body",
lo refleja de nuevo en el documento actual.
Recuerda, el objeto "document" no es la página web real,
pero el navegador intenta hacer que refleje la página actual tanto como sea posible.
Ahora, hay muchas maneras de hacer el paso uno,
porque generalmente vas a querer encontrar algo más que la etiqueta "".
Tal vez quieres encontrar una etiqueta con un cierto "Id", o todas las etiquetas de un determinado tipo.
De eso vamos a hablar en el tutorial de Métodos de Acceso al DOM.
Hay muchas cosas interesantes que puedes hacer en el paso dos,
como cambiar los atributos o estilos de las etiquetas que encuentres.
Hablaremos de eso en el tutorial de Modificación del DOM.
Una vez que domines el acceso y la manipulación del DOM, vamos a pasar a cosas divertidas
que podemos hacer, como responder a eventos del usuario o hacer animaciones.
Por el momento es un poco tonto que utilicemos JavaScript para hacer
algo que podríamos hacer con HTML en el principio,
pero confía en mí, querrás dominar el acceso al DOM y la modificación del DOM,
hasta que puedas crear grandes experiencias interactivas.
Así que sigue así y nos vemos pronto.