Como llamar mediante jQuery a los nodos de un documento web

Como llamar mediante jQuery a los nodos de un documento web

Print Friendly, PDF & Email
Como llamar mediante jQuery a los nodos de un documento web
Valora esta entrada
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

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 $('...')

Cuando usemos $(‘…’) siempre vamos a obtener un array. Por mucho que sólo nos devuelva un único nodo este será un array de longitud 1.

Las implicaciones son que

  • En caso de quererlos usar deberemos escribir [indice]. Por ejemplo $(“p:first”)[0]
  • 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 = “…”;  Aunque para ello veremos que existen métodos preparados específicamente para jQuery como .html(…) y .css(…). Pero esto lo detallaremos más adelante.

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:

Como comprobar si una página ha cargado la librería jQuery
- 162
El primer paso para empezar a escribir jQuery es tener la certeza de que la librería efectivamente se está cargando. No serías el primero que lo hace todo bien pero no le funciona nada porqué le falla...
Como navegar entre los nodos de un documento web mediante jQuery
- 177
Hay casos en los que es más práctico navegar por el DOM para llegar hasta los nodos con los que queremos interactuar. Comparamos los métodos usados en javascript puro con los que usaríamos en jQuery....
Desactivar el envío de un formulario con JQuery y preventDefault()
- 312
Ejemplo práctico de como desactivar el envío de un formulario que pide aceptación RGPD (antigua LOPD) mediante jQuery y preventDefault()
¿Que es jQuery?
- 214
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 ...
¿Empezar por Javascript o Python? ¿Continuar con jQuery o angular? ¿Y node.js?...
- 223
¿Qué aprender primero? Gentileza de Stack Overflow algunas pistas. ¿Primero javascript o python? ¿Continuar con jquery o node.js?
Como acoplar jQuery en un documento web y errores típicos a evitar
- 156
Tutorial paso a paso dónde explico como acoplar jQuery en un documento web. Se detallan también algunos errores típicos que no deberías cometer.
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

1 Comentario
  • Francesc Ricart
    Publicado a las 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)

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.