Como llamar mediante jQuery a los nodos de un documento web

Como llamar mediante jQuery a los nodos de un documento web

0
(0)

En el tutorial javascript se explicó el concepto de DOM y las diversas formas como podemos acceder a los nodos de un documento web.

Si no estás familiarizado con lo que es y para que sirve el Document Object Model tal vez este sea el momento oportuno para una breve lectura interesante.

Recordemos que el navegador web interpreta las páginas web en base a un esquema dónde todas y cada una de las etiquetas del documento constituyen un nodo.

Un nodo es un tipo especial de objeto que se caracteriza por tener una etiqueta, un contenido, eventos asociados y atributos.

En Javascript se puede acceder a los nodos de un documento web mediante navegación directa. Por ejemplo escribir en la consola del navegador document.body.firstElementChild y os devolverá el primer nodo hijo del nodo <body>.

O bien también se puede acceder mediante el uso de los selectores usados en CSS para dar estilos al documento web.

El selector universal, selectores de etiqueta, selectores descendientes, selectores de clase, de identificador, …

A estas alturas no debería ser nada nuevo.

¡Exacto! Si tienes un buen manejo de CSS las líneas que vienen a continuación van a ser coser y cantar para ti.

En esta entrada no voy a hacer un repaso de los selectores CSS porqué podéis ir al tutorial CSS para ello.

Vayamos al grano.

Equivalencia entre jQuery y Javascript clásico

Veamos dos expresiones equivalentes para llamar a los nodos de un documento web mediante selector CSS

  • En Javascriptdocument.querySelectorAll('//selector CSS');
  • En jQuery$('//selector CSS');

Recordar que es indistinto poner comillas simples que dobles.

Por ejemplo

tabla comparativa jquery y javascript
Comparación entre como llamar nodos en javascript y jquery

Sin embargo jQuery incluye una serie de selectores avanzados que en Javascript puro no siempre vamos a poder usar.

Estos selectores avanzados nos permiten filtrar nodos.

El primero, el último, los pares, los impares,…. lo veremos más adelante en nuestro tutorial jQuery.

Por hoy nos contentaremos en comparar la forma como podemos acceder a los nodos de las listas de nodos (arrays) que devuelven las expresiones anteriores.

tabla equivalencias JS y jQuery
Tabla de equivalencias en la forma de llamar a los nodos del DOM entre jquery y javascript.

Como se puede observar jQuery reduce muchísimo la longitud de la escritura. Y por ende la probabilidad de cometer errores.

Ahora bien, a mi modo de ver es muchísimo más intuitivo javascript clásico que la versión jQuery.

¡A medida que vayamos avanzando en el tutorial veremos si opináis como yo o no!

Que tipo de información devuelve la función jQuery, $()

El resultado que se obtiene en jQuery y Javascript es parecido. Pero no el mismo.

Fijaros en la siguiente captura de pantalla de un ejemplo real de clase.

diferencias entre jquery y javascript
Diferencia en la llamada de nodos entre jQuery y Javascript

Cuando llamamos al primer párrafo del documento mediante javascript obtenemos el conjunto del nodo. Fijaros que fácilmente podríamos identificar la salida como una etiqueta html con su contenido y atributos.

Cuando llamamos al primer párrafo del documento mediante jquery obtenemos un array.

Implicaciones del uso de $('...'). De Javascript a jQuery.

Cuando usemos $(‘…’) siempre vamos a obtener un array. 

La afirmación anterior es importante.  Repito: siempre un array.

Las implicaciones son que

  • Muchos métodos Javascript sirven para un nodo (elemento). No para un array.
/*No podemos escribir: $("p").innerHTML */
/*Si podemos escribir: $("p")[0].innerHTML  porqué del array hemos cogido un nodo y ahora ya le podemos aplicar métodos de Javascript puro. */
  • Muchos métodos javascript conocidos no los podemos aplicar tal cual porqué están preparados para actuar sobre un nodo y no sobre un array. En caso de quererlos usar deberemos transformar el resultado a nodo y entonces usarlo. Por ejemplo: $("p:first")[0].innerHTML = " ";/*parece absurdo pero debemos usar el índice para pasar de jquery a javascript*/
  • Veremos que existen métodos preparados específicamente para jQuery que si funcionan con arrays. Por ejemplo .html(…) y .css(…). Pero esto lo veremos en una futura entrada.

Hey querido lector@,

Cuando yo estudiaba jQuery en tutoriales y manuales de Internet a menudo me hubiese venido bien encontrar la transición de Javascript a jQuery.

Espero haber aportado un punto de vista algo diferente y que sobre todo te pueda ser de utilidad.

Nos vemos mañana como siempre con una nueva publicación.

—–

Foto miniatura de Norbert Levajsics en Unsplash

¿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.

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

1 Comment
  • Francesc Ricart
    Posted at 17:03h, 17 junio Responder

    Fe de erratas:
    Mientras he estado escribiendo la publicación he tenido dudas sobre si era correcto o no escribir $(«p.first») o $(«p.first()»)
    Tras varias pruebas en la consola creo que es correcto de las dos formas. Sin embargo, como en toda la bibliografía consultada se acepta siempre la primera he preferido no arriesgar y dejarlo yo también de la misma forma. Si tenéis dudas hacer vosotros mismos la prueba en la consola del navegador y veréis que ambas funcionan. (al menos con chrome)

Post A Comment