htmlcinco

HTML 5, encontrá novedades, tutoriales y traducciones sobre este lenguaje.

Nueva API de selectores vs jQuery

Nueva API de selectores vs jQuery

En HTML5 existe una nueva API de Selectores que nos permite encontrar elementos en el DOM a través de selectores CSS3, como lo hacemos con jQuery. Esto simplifica el trabajo del desarrollador web a la hora de enfrentarse con la estructura de un documento.

Los métodos previos para seleccionar elementos en el DOM son los siguientes:

Función (ejemplo) Descripción
getElementById(‘algunID’) Retorna el elemento único con el atributo id especificado (en el ejemplo: “algunID”).
getElementsByName(‘algunName’) Retorna todos los elementos cuyo atributo name tiene el valor especificado (“algunName”)
getElementsByTagName(‘textarea’); Retorna todos los elementos cuyo nombre de etiqueta concuerda con el valor especificado (“textarea”).

Con los nuevos selectores que nos ofrece la mencionada API, ahora podemos seleccionar de manera más precisa elementos dentro del DOM.

Los nuevos selectores en HTML5

Ahora podremos usar los poderosos selectores que utilizamos en nuestro CSS. Si, tal cual lo hacemos en librerías como jQuery, pero de forma nativa al navegador.

A continuación las dos funciones de las que hablamos:

Función (ejemplo) Descripción
querySelector(‘p.marca’) Retorna el primer elemento que coincide con el valor que especificamos. Para el ejemplo: encuentra el primer párrafo con clase “marca”.
querySelectorAll(‘#mensaje a’) Retorna todos los elementos que concuerdan con el valor especificado. Para el ejemplo: selecciona todos los elementos a dentro del contenedor con id “mensaje”.

A estas funciones es posible pasarles más de un parámetro o regla separados por coma, por ejemplo:

1
var elementos = document.querySelector('.claseA', '.claseB');

Este código encuentra el primer elemento que coincide con alguna de las reglas. Para el caso de la función querySelectorAll(), los elementos seleccionados serán todos los elementos que coincidan con alguno de los valores especificados.

Las nuevas funciones de selección del HTML5 no son solo más fáciles de usar que sus predecesoras, sino que también son más rápidas para manipular el DOM de nuestras páginas.

jQuery vs Nuevos Selectores

Al ver estas nuevas funcionalidades lo primero que pensamos es “jQuery y otras librerías js nos permiten hacer esto hace tiempo”, pero aquí hablamos de tener estas herramientas de forma nativa en el navegador…

La buena noticia es que jQuery ya está utilizando las nuevas funciones de selección en el código de sus últimas versiones. Para verificar esto, basta con mirar el código de jQuery (el archivo que no está comprimido), como muestra la siguiente captura de pantalla:

Nuevos selectores de HTML5 en jQuery

querySelectorAll() ya está siendo utilizado en la versión 1.6.2 de jQuery

Si, jQuery detecta si el navegador es capaz de usar querySelector() y querySelectorAll(), y si lo es, entonces hará uso de estas.

Conclusión

Para los que usamos jQuery en (casi todos) nuestros proyectos esto es una excelente noticia, ya que nos aseguramos de que este framework está optimizado al 100%!

Comparte conocimiento:
Tweet about this on Twitter0Share on LinkedIn0Share on Facebook0Share on Google+0
¿Quieres saber más?
¡Suscríbete a nuestro newsletter!

Respetamos tu privacidad y tu tiempo, no recibirás ningún tipo de correo basura.

8 comentarios para “Nueva API de selectores vs jQuery”

  1. Feder dice:

    Muy Bien por jQuery!!!

  2. Gabo dice:

    Excelente post! Yo uso jquery en TODOS mis proyectos y tienes razón, es una excelente noticia. Pasará lo mismo con las otras librerías como Mootools o Protoype? O sea que ya esten usando features del html5??

  3. Al Bonilla dice:

    Gabo: Yo utilizo Mootools, me acabo de fijar en su código descomprimido y por suerte usan estás funciones!!

  4. […] podría decir que esta es la segunda parte del primer artículo que escribí hace unos días sobre los nuevos selectores que ofrece HTML5 frente a los que ya nos brindaba jQuery. En este caso vemos la API para manipulación de clases. El nuevo objeto classList nos provee a […]

  5. Nuevos Sitios Web dice:

    Muy buen artículo!

  6. […] Actualmente, un gran conjunto de las nuevas funcionalidades sobre el DOM puede ser “corregido”. Sin embargo, los “shims” o “correctores” actuales no están probados en un 100% y se pierden algunas funciones. Los polyfills existentes (ES5-DOM-shim y DOM-shim) se deben usar con precaución. Igual hay que recordar, que podemos utilizar cualquier librería que manipule el DOM como jQuery que posee selectores y funciones muy potentes como las nativas de HTML5. He escrito un artículo en este sitio sobre esta API y su relación con los selectores de jQuery. […]

  7. […] Para seleccionar elementos del DOM según su atributo data, utilizamos la nueva API de selectores: […]

  8. […] Actualmente, un gran conjunto de las nuevas funcionalidades sobre el DOM puede ser “corregido”. Sin embargo, los “shims” o “correctores” actuales no están probados en un 100% y se pierden algunas funciones. Los polyfills existentes (ES5-DOM-shim y DOM-shim) se deben usar con precaución. Igual hay que recordar, que podemos utilizar cualquier librería que manipule el DOM como jQuery que posee selectores y funciones muy potentes como las nativas de HTML5. He escrito un artículo en este sitio sobre esta API y su relación con los selectores de jQuery. […]

Dejar un comentario