Como navegar entre los nodos de un documento web mediante jQuery

0
(0)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

ordenador con código javascript en la pantalla

En una entrada anterior hemos aprendido como podemos llamar mediante la función $ a listas de nodos del DOM.

Normalmente es relativamente fácil identificar a los nodos de un documento web para poderlos llamar.

Sin embargo hay casos en los que es más práctico navegar por el DOM para llegar así hasta los nodos con los que queremos interactuar.

Ahora sería un buen momento para repasar como accedíamos a los nodos mediante javascript puro.

En la entrada de hoy NO hacemos referencia a los ya mencionados en esta entrada:.first, .last, .eq(). Recordemos que estos los usábamos para llamar los nodos de una lista de nodos ya creada.

Lo que queremos hoy es a partir de un nodo acceder a sus hermanos, hijos y padres.

Acceder a los hijos, padres, hermanos. Comparación entre javascript y jQuery

A continuación se muestra un cuadro comparativo con los métodos que típicamente usaríamos en Javascript puro y su traducción a jQuery.
Como navegar entre los nodos de un documento web mediante jQuery 1
Atención porqué fijaros que uso métodos javascript que típicamente tienen poco protagonismo en la bibliografía clásica (como w3schools).

En javascript soy más partidario del uso de «Element» siempre que sea posible porqué «node» devuelve mucho ruido como pueden ser por ejemplo los espacios en blanco de separación entre etiquetas en el html.

Así mismo valga decir que en jQuery existen muchísimos más métodos y muy interesantes pero que he obviado porqué esta es una de aquellas situaciones en las que menos es más.

¡Mejor unos pocos métodos pero bien utilizados!

Cuidado: En la chuleta en la columna jQuery se ha escrito «elemento». Dicho elemento hace referencia a la lista que devolvería $(«selector«). Pero en la columna Javascript hace referencia a el elemento (etiqueta html) en sentido estricto.¡Hey querido lector!

Hasta aquí un nuevo capítulo de nuestro tutorial jQuery.

¡Seguiremos mañana con un nuevo contenido como siempre!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 0 / 5. Votos: 0

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *