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
Deja una respuesta