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:
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%!
Bitcoin
Ethereum
Bitcoin cash
Tether
Stellar
Bitcoin!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Bitcoin. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Bitcoin
Ethereum!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Ethereum. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Ethereum
Bitcoin cash!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Bitcoin cash. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Bitcoin cash
Tether!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Tether. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Tether
Stellar!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Stellar. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Stellar
Muy Bien por jQuery!!!
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??
Gabo: Yo utilizo Mootools, me acabo de fijar en su código descomprimido y por suerte usan estás funciones!!
[…] 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 […]
Muy buen artículo!
[…] 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. […]
[…] Para seleccionar elementos del DOM según su atributo data, utilizamos la nueva API de selectores: […]
[…] 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. […]