Adiós a jQuery: seleccionando nodos con javascript puro

Hola, soy Fernando y soy un jQuery-adicto.

Pero no por mucho. He decidido rehabilitarme. No debo necesitar jQuery para hacer hasta las más mínimas ediciones en el DOM. jQuery es una librería muy útil, sí, pero si solo necesit o reemplazar atributos, mover nodos, etc., es como usar una aplanadora para matar una mosca… y como las aplanadoras, jQuery es muy pesado y lento para esas funciones. Hay mejores formas, formas que no requieren una librería de 100 kb.

Estoy seguro de que muchos hay como yo. Pensando en ustedes, les presento un primer paso: cómo reemplazar algunas selecciones simples.

Nota: en todos los ejemplos a continuación asumimos el uso de la última versión de jQuery disponible.

Veamos un caso sencillo: quiero obtener un solo nodo mediante su ID.

var nodo = $("#header");

Esto nos devuelve un objeto jQuery con un solo elemento, o null si el elemento no existe.

En vez de esto, podemos recurrir a nuestro viejo amigo, getElementById:

var nodo = document.getElementById("header");

Lo que obtenemos aquí es un objeto que implementa la interfaz Element, que es básicamente un nodo. Si lo que recorremos es un documento HTML (o sea, el 90% de los casos), será un objeto HTMLElement. Con este objeto podemos hacer todas las modificaciones que necesitemos, y también incluye métodos para recorrer el árbol a partir de ese objeto (como parent, sibling, etc.)

Ahora veamos el siguiente caso:

var arts = $("article");

Este código nos devuelve, en la variable arts, un objeto jQuery con una colección de todos los nodos article en el documento. ¿Cómo obtener algo similar con javascript puro?

var arts = document.getElementsByTagName("article");

Lo que hace getElementsByTagName es devolver una colección de Element, en la forma de un objeto Nodelist que si bien puede recorrerse de forma similar a un arreglo, también tiene sus propios métodos para ser recorrido.

¿Qué pasa si deseo referirme a todo lo que tenga cierta clase? Podría usar:

var hls = $(".highlights");

O podría hacer, mejor, esto:

var hls = document.getElementByClassName("highlights");

Lo que getElementsByClassName devuelve también es un NodeList.

Vayamos, por último, a una instancia un poco más complicada:

var v = $("#article01 .first");

En este caso hay dos opciones a seguir. Digamos que no tenemos que soportar navegadores viejos:

var v = document.querySelector("#article01 .first");

querySelector es un recién llegado a javascript; aceptará cualquier cosa que le pudiéramos haber dicho directamente al objeto jQuery, usando selectores de CSS. Bueno, en IE parece que no puede usar sino selectores de CSS2.

querySelector será muy útil si tenemos expresiones complicadas. Sin embargo, si nos preocupan los navegadores viejos y/o la eficiencia (¿y qué no se supone que dejamos de usar jQuery precisamente por eficiencia?), es mejor quedarnos con lo más básico:

var v1 = document.getElementById("article01");
var v2 = v1.getElementsByClassName("first");

La diferencia en desempeño es importante, según decían mis referencias. No me quise quedar con la duda y creé un caso de prueba público… anda, date cuenta por tí mismo. (Spoiler: excepto en Chrome, querySelector es patéticamente ineficiente.)

En fin, esto es solo un primer paso. Lo siguiente será: ¿qué hacer con el objeto de javascript que acabo de obtener? Pero eso ya lo exploraremos en un futuro post.

Las principales referencias para este post han sido el tutorial “From jQuery to Javascript: A Reference” por Jeffrey Way y el artículo “Native JavaScript Equivalents of jQuery Methods: the DOM and Forms” por Craig Buckler.

Publicado por

flopez

Desarrollador web con énfasis en front-end y usabilidad. Actualmente trabajo en Justia, Inc.

Un comentario en “Adiós a jQuery: seleccionando nodos con javascript puro”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *