Accediendo a los Nodos
Una vez que está construido el DOM ya podemos comenzar a acceder a cualquier nodo del arbol y manipularlo de forma sencilla, crear nuevos elementos, eliminarlos…
Accediendo al nodo por Id
La forma más sencilla de acceder un nodo es por el id, `si se localiza el elemento, este es devuelto como un objeto y si no se localiza se queda como null.
Para ver como se accede a un nodo por medio de la Id vamos a verlo en un pequeño ejemplo:
See the Pen getElementById by Miguel A. López Torralba (@mialto) on CodePen.
Si analizamos El código vemos varias cosas interesantes, la primera es que vemos como se toma el valor de un nodo por medio de la id y lo guardamos en una variable llamada elemento.
A continuación se accede a otro nodo y se le añade .innerHTML que lo que hace es modificar el contenido del nodo por el que le introducimos a continuación, en nuestro caso una frase y el contenido del nodo guardado en elemento.
Este método es unos de los más utilizados al desarrollar aplicaciones webs dinámicas, es la función preferida para acceder directamente a un nodo y poder leer o modificar sus propiedades.
Hay que tener en cuenta que la id al ser única para el nodo, nos hace tomar exactamente el nodo que deseamos.
Accediendo al nodo por la etiqueta
Para acceder al nodo según su etiqueta debemos utilizar la función getElementsByTagName() de este modo podemos obtener todos los elementos del DOM que tienen esa etiqueta, por ejemplo <p>.
Un ejemplo muy común es obtener todos los parrafos de un arbol de nodos
var parrafos = document.getElementsByTagName("p");
Aquí vemos como la función recibe como parámetro el nombre de la etiqueta que requerimos y nos devuelve un array con todos los párrafos del DOM.
Ahora sería muy sencillo acceder a uno de esos parrafos por ejemplo:
var primerParrafo = parrafos[0]
Nos daría el primer párrafo.
Igualmente podríamos recorrer todos los elementos del array con un bucle como en el siguiente ejemplo:
for (var i=0; i<parrafos.lenght; i++){ var parrafo = parrafos[i]; }
Además la función getElementsByTagName() se puede utilizar de forma recursiva sobre los nodos, como por ejemplo en el siguiente ejemplo para obtener todos los párrafos del primer div de la página:
var divs = document.getElementsByTagName("div"); var primerDiv = divs[0]; var parrafosPrimeraCaja = primerDiv.getElementsByTagName("p");
Accediendo a los nodos por nombre
Utilizando la función getElementsByName() podemos buscar los elementos cuyo atributo name sea igual al parámetro enviado.
Por ejemplo imaginemos que tenemos un DOM donde tenemos párrafos con el atributo name, por ejemplo
<p name=»importante»>…</p>
Podemos recoger el valor de este párrafo con la siguiente línea:
var parrafoImportante = document.getElementsByName("importante");
Por norma general el elemento name debe de ser único para el elemento HTML al que defino, aunque hay que tener cuidado, y yo recomiendo usar ids mejor que names, aunque habrá ocasiones en las que sea práctico usarlo.
Accediendo a los nodos por el nombre de clase
Es posible también acceder a todos los nodos que tienen un mismo nombre de clase utilizando la función getElementsByClassName()
De esta manera solo deberíamos hacer algo parecido a esto para obtener los nodos que tienen nuestra clase:
var principal = document.getElementsByClassName("principal");
Accediendo a los nodos por el selector CSS
Otra forma de acceder a los nodos es por medio de los selectores CSS, por ejemplo imaginemos que tenemos una serie de párrafos con la clase encabezado <p class=»encabezado»>…</p>, podemos acceder a ellos no solo por medio del nombre de clase también por el selecto CSS; querySelectorAll(«p.encabezado») de la siguiente forma:
var encabezados = document.querySelectorAll("p.encabezado")
Otras formas de acceder a los nodos
Función | Acción |
---|---|
document.anchors | Cuenta las anclas (enlaces con nombre) que hay en el DOM |
document.body | Captura todo el body en una cadena |
document.documentElement | Captura el head y el body en una cadena |
document.embeds | |
document.forms | Captura los formularios en un array |
document.head | |
document.images | Captura las imágenes del DOM en una array |
document.links | Captura los links del DOM en un array |
document.scripts | Captura los scripts en un array |
document.title | Captura el título del documento HTML |
Hola Miguel un placer como explicas los conceptos de verdad. Estoy empezando a estudiar Javascript por libros
y a veces consulto conceptos por la web, así he llegado aquí y como te digo un placer aprender por tus ejemplos.
me alegra que te sirvan, siempre se agradece saber que ayudas a la gente 🙂