Trabajando con el DOM
Para acceder al objeto del documento utilizamos una variable global del documento; dicha variable es uno de los objetos clave que el navegador crea para nosotros, ya que a través de este objeto de documento es que podemos acceder a la información del documento como un todo y nos da acceso individual a cada objeto del documento.
Como siempre veamos un ejemplo con el cual podemos compaginar la teoría que sabemos con la forma en que se aplica en la realidad.
<!DOCTYPE HTML> <html> <head> <title>Example</title> </head> <body> <p id="fruittext"> There are lots of different kinds of fruit - there are over 500 varieties of <span id="banana">banana</span> alone. By the time we add the countless types of apples, oranges, and other well-known fruit, we are faced with thousands of choices. </p> <p id="apples"> One of the most interesting aspects of fruit is the variety available in each country. I live near London, in an area which is known for its apples. </p> <script> document.writeln("<pre>URL: " + document.URL); var elems = document.getElementsByTagName("p"); for (var i = 0; i < elems.length; i++) { document.writeln("Element ID: " + elems[i].id); elems[i].style.border = "medium double black"; elems[i].style.padding = "4px"; } document.write("</pre>"); </script> </body> </html>
El código con el cual utilizamos el DOM es bastante corto y sencillo, sin embargo captura los diferentes usos que le podemos dar, vamos a explicar parte por parte el código para ir viendo como hemos utilizado los objetos.
Una de las acciones más básicas que podemos utilizar es obtener la información del documento HTML con el cual estamos trabajando por ello la primera línea que hemos colocado en nuestro código hace justo eso y la podemos ver:
document.writeln("<pre>URL: " + document.URL);
En este caso leemos el valor de la propiedad document.URL, la cual nos retorna el URL de documento actual, es decir, el URL que el navegador utilizó para cargar el documento en el cual tenemos el código.
También vemos como utilizamos el método writeln:
document.writeln("<pre>URL: " + document.URL);
Este método simplemente agrega contenido al final de nuestro documento HTML, en este caso en particular iniciamos agregando un tag <pre> y luego la propiedad URL, con esto ya hemos modificado la estructura y contenido del DOM.
Ahora lo siguiente que hicimos fue seleccionar todos los elementos que tengan la etiqueta p en el documento para ello utilizamos la siguiente línea:
var elems = document.getElementsByTagName("p");
Cómo vemos el método getElementsByTagName es el que sirve a nuestro propósito, al mismo tiempo todo lo que este método recolecte lo asignamos a la variable elems.
En la linea siguiente hacemos una iteración sobre la variable elems, obteniendo los objetos asignados, por cada uno que iteremos vamos a agregar una linea de texto con su id y posteriormente vamos a cambiar sus atributos para modificar su aspecto.
for (var i = 0; i < elems.length; i++) { document.writeln("Element ID: " + elems[i].id); elems[i].style.border = "medium double black"; elems[i].style.padding = "4px"; }
Como vemos agregamos un borde a cada elemento que tenemos almacenado en nuestra variable elems y adicionalmente agregamos un padding.
Luego de todo esto veamos finalmente como queda todo esto en el navegador: