-
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.
