Como llamar nodos del DOM mediante javascript

consola del navegador

Como llamar nodos del DOM mediante javascript

Print Friendly, PDF & Email
Como llamar nodos del DOM mediante javascript
Valora esta entrada
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.

Entradas relacionadas:

Resumen de carácteres extraños en Javascript
- 307
Muchos alumnos me habéis pedido esta entrada sobre los carácteres , . : ; [] {} () en Javascript. Y es que tenéis razón. Hay pocos recursos en internet que los aglutinen y nos expliquen dónde debemo...
Ejercicio JS – Como cargar una imagen aleatoria al clicar un botón
- 170
Ejercicio javascript resuelto en el que see plantea un script para cargar una imagen aleatoria cada vez que se clica un botón.
La apasionante historia del Javascript (resumida)
- 595
Javascript es un lenguaje de programación de lado cliente que ha cambiado Internet tal y como lo conocemos a día de hoy. Junto con el html y el css es uno de los 3 pilares del diseño web. Es un requer...
Crear, modificar, eliminar y detectar cookies con Javascript
- 1176
En esta entrada explicamos los tipos de cookies que existen y mostramos una biblioteca de funciones que nos permite crear, modificar, eliminar y detectar cookies con javscript.
Ejercicio JS – Ventana emergente control de edad
- 112
Ejercicio javascript que regula el control de accesos a una página web según edad del visitante. Incluye solución.
Ejercicio – Crear una lista de recordatorios
- 144
Ejercicio javascript solucionado para crear una lista de recordatorios y que es capaz de resetear todos los nodos. Apuntes de clase.
¿Empezar por Javascript o Python? ¿Continuar con jQuery o angular? ¿Y node.js?...
- 363
¿Qué aprender primero? Gentileza de Stack Overflow algunas pistas. ¿Primero javascript o python? ¿Continuar con jquery o node.js?
Ejercicio JS – Crear un cronómetro con javascript
- 330
Completo cronómetro JS dónde se usa setInterval, addEventListener, removeEventListener y se repasan conceptos de CSS. Incluye solución.
Ejercicio – Corregir errores de sintaxis en funciones
- 164
Ejercicio javascript dónde se repasa la sintaxi de funciones. Corrige los errores.
Eliminar el comportamiento por defecto de un elemento html
- 351
Explicamos como desactivar el comportamiento por defecto de un elemento HTML mediante el uso del método javacript preventDefault()
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.