18 Jun Como llamar mediante jQuery a los nodos de un documento web
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 Javascript
document.querySelectorAll('//selector CSS'); - En jQuery
$('//selector CSS');
Recordar que es indistinto poner comillas simples que dobles.
Por ejemplo
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.
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.
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
Entradas relacionadas:
Ejercicio en el que se pide simular la histórica etiqueta blink de Netscape. Incluye solución y explicación.
Es importante no liarse con Javascript. Se explica como modificar el css mediante jquery y sin perder de vista el JS puro.
¿Qué aprender primero? Gentileza de Stack Overflow algunas pistas. ¿Primero javascript o python? ¿Continuar con jquery o node.js?
Explicamos como consultar y/o modificar los atributos de un nodo web con jQuery. También repasamos el concepto de atributo y como sería en JS.
Ejemplo práctico de como desactivar el envío de un formulario que pide aceptación RGPD (antigua LOPD) mediante jQuery y preventDefault()
Bienvenidos a un completo tutorial ordenado por dificultad creciente para todos aquellos que queráis aprender jQuery. Previamente es aconsejable un buen dominio de html, css y javascript. Todos estos ...
Francesc Ricart
Posted at 17:03h, 17 junioFe 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)