Como llamar nodos del DOM mediante javascript

consola del navegador

Como llamar nodos del DOM mediante javascript

3.3
(3)

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.

Acceso directo a un nodo

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.

Navegar entre nodos

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.

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 3.3 / 5. Votos: 3

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

¿Dónde he fallado?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

2 Comments
  • CovadongaQS
    Posted at 12:37h, 02 diciembre Responder

    Me gusta la página solo le falta un pequeño ejemplo de cada.
    Gracias

    • Francesc Ricart
      Posted at 13:14h, 02 diciembre Responder

      tienes razón,
      lo dejo anotado en mi lista de puntos a ir mejorando
      ¡muchas gracias!

Post A Comment