Como llamar nodos del DOM mediante javascript

Una vez descrito el concepto de DOM y su funcionamiento el siguiente paso es ser capaces de identificar un nodo en un documento web de forma inequívoca.

Existen dos estrategias:

1. Por acceso directo al nodo.
2. Navegando entre nodos una vez identificado un hijo, un nodo superior o un vecino.

Es importante conocer los dos métodos para disponer de más recursos y entender conocimientos futuros.

En Javascript existen una serie de métodos del nodo «document» que permiten llamar a los nodos según sus características. Hay muchos, pero sólo voy a escribir los más importantes.

1. document.getElementById( ) . Es la instrucción clásica que encontraréis en todas partes. Una particularidad del atributo id que puede acompañar a cada etiqueta es la de ser única en un documento web. El conjunto de la instrucción devuelve un único nodo. Se escribe el nombre del atributo id sin el símbolo # (hashtag)·
2. document.getElementsByTagName( ) . Devuelve un array con todas las etiquetas de un determinado tipo de un documento web. Particularmente me gusta para llamar a los h1, los h2, h3, title, meta, … para hacer una auditoría SEO en búsqueda de lo que el ojo no ve.
3. document.getElementsByClassName( ) . En Javascipt la palabra class es reservada. En su lugar se usa la palabra className. Devuelve un array con todas las etiquetas con un mismo nombre.
4. document.getElementsByName( ) . De interés para identificar etiquetas en formularios. Personalmente no me apasiona.
5. document.querySelector( ) . Entramos en una instrucción más potente. A diferencia de las otras instrucciones, aquí podemos poner cualquier selector CSS que queramos. Tal y como lo escribiríamos en CSS. Sólo devuelve un único nodo. A diferencia de document.getElementById( ) aquí si escribiríamos el identificador con el hashtag #
6. document.querySelectorAll( ). Es la instrucción que más me gusta de todas por su versatilidad. Devuelve un array con todos los nodos que sea capaz de llamar el selector CSS que escribas dentro del paréntesis. Me gusta porqué si dominas CSS te facilita muchísimo el aprendizaje de toda esta rama del Javascript.

Si buscáis en tutoriales de internet veréis que hay un abuso del método 1. Recomiendo no dejarse llevar por las aparentes virtudes de usar el método mediante identificador para no caer en malos vicios.

Es necesario familiarizarse con todos los posibles.

Una vez has sido capaz de identificar un nodo entonces puedes acceder al nodo inmediatamente superior,  a los hijos, los hermanos, los primos….

Este tipo de navegación puede llegar a ser muy útil. Por ejemplo para eliminar nodos.

Sin embargo personalmente no me apasiona porqué un documento web puede verse modificado en tiempo real y las jerarquías y esquema del DOM pueden variar. Lo que antes funcionaba puede pasar a no funcionar tras algunas interacciones.

Otra razón es que los espacios en blanco que dejemos en el HTML pueden llegar a ser un quebradero de cabeza… ahora tal vez no se entienda pero en cuanto practiquéis los métodos que encontráis resumidos en esta entrada ¡entenderéis a que me refiero!

Las instrucciones imprescindibles son:

1. elemento.parentNode . Permite acceder al padre de un nodo. Es útil para eliminar nodos.
2. elemento.firstElementChild . Para acceder al primer hijo.
3. elemento.lastElementChild . Para acceder al último hijo.
4. elemento.nextElementSibling . Para acceder al siguiente hermano con misma jerarquia. Por ejemplo útil en una lista.
5. elemento.previousElementSibling . Para acceder al hermano anterior con misma jerarquia.
6. elemento.childNodes. Devuelve un array con todos los hijos.

Atención que van sin paréntesis.

En este escrito hemos repasado los distintos métodos para acceder mediante Javascript puro a los nodos del DOM.

Existen otras formas de hacerlo. Por ejemplo mediante JQuery. Pero si se entiende lo que se narra en esta página luego JQuery es muchísimo más fácil.

En la próxima entrada de JS hablaremos de como acceder a las propiedades de los nodos y como acceder y modificar el contenido y sus propiedades como por ejemplo las clases y/o otros atributos que acompañan a las etiquetas HTML.