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:

Ejercicio – Crear una lista de recordatorios
- 57
Ejercicio javascript solucionado para crear una lista de recordatorios y que es capaz de resetear todos los nodos. Apuntes de clase.
Resumen de carácteres extraños en Javascript
- 193
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...
Como añadir nuevos nodos al DOM usando Javascript
- 350
En esta entrada vemos un tutorial paso a paso sobre como añadir nuevos nodos al DOM mediante Javacript con el ejemplo de un párrafo y el de una imagen.
¿Empezar por Javascript o Python? ¿Continuar con jQuery o angular? ¿Y node.js?...
- 227
¿Qué aprender primero? Gentileza de Stack Overflow algunas pistas. ¿Primero javascript o python? ¿Continuar con jquery o node.js?
Ejercicio JS – Como cargar una imagen aleatoria al clicar un botón
- 54
Ejercicio javascript resuelto en el que see plantea un script para cargar una imagen aleatoria cada vez que se clica un botón.
Como eliminar nodos del DOM mediante Javascript
- 470
Resumimos como eliminar nodos del DOM mediante javascript y siguiendo una estrategia sencilla mediante .removeChild()
Funciones Javascript: declaración, uso y utilidad en programación
- 458
Una función es una estructura de código que ejecuta y transforma unos inputs de entrada en un output de salida en forma de dato o acción. Hemos trabajado con funciones toda nuestra vida. Las aprendimo...
Ejercicio – Generación de una fecha personalizada mediante javascript
- 65
Ejercicio javascript dónde se trabaja con fechas y los métodos para fechas con el objetivo de crear fechas con formato personalizado.
Ejercicio – ¿Qué declaraciones de variables son erróneas en JS?
- 111
En este ejercicio repasamos los conceptos relativos a la declaración de variables en javascript. ¿Qué declaraciones son incorrectas? Detéctalas y corrígelas.
Introducción a las animaciones Javascript: setInterval() y setTimeout()
- 518
Resumimos las funciones setInterval(), clearInterval y setTimeout(). Cuales son sus parámetros, que es una función anónima y como la llamamos.
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.