Cosas de JavaScript: Seleccionando ID numérico con querySelector

En el artículo anterior a este describo algunos aprendizajes mientras completaba una prueba técnica. Había que implementar una especie de resaltado en textos en una página, mandarlos a una base de datos y poder traerlos de nuevo y mostrarlos donde van.

Pasa que una de las formas de tener precisión sobre dónde volver a mostrar lo que se resaltó era guardando algunos elementos adicionales como el párrafo, un ID que identifique al párrafo y en el caso puntual de la prueba, podía guardar el ID de la página del texto(los textos eran páginas de un “libro” web).

Entonces, la tabla de los resaltados lucía así:

highlights
start INT
end INT
paragraph INT
user_id INT
page_id INT
created_at DATE NOT NULL
updated_at DATE NOT NULL
paragraph_id INT

Con esos campos clave almacenados, ya al momento de pedir los resaltados del texto, era ya cuestión de manipular el DOM para mostrarlos en su lugar. Pero, como no todo puede ser tan lindo, hubo problemas menores.

¿querySelector o getElementById?

Hasta hace poco más de 5 meses fue que volví a escribir código en JavaScript. Cuando comencé a estudiar React y ver todo lo que había avanzado el lenguaje fue una sorpresa total.

Una de las cosas que desconocía es la función document.querySelector(). Si bien en mis tiempos de JavaScript sabía de la existencia de document.getElementByName() y document.getElementById() en realidad no los usaba mucho porque siempre fui de usar jQuery 🙂

Ahora, en la prueba, cuando traía los resaltados(esto lo hice con otra cosa nueva fetch()) del usuario e iba a buscar la página en el DOM de esta forma

document.querySelector("#" + highlight.page_id);

No lo encontraba. ¿Por qué? Cosas de la vida… No necesariamente. La explicación tiene un poco más de sentido y es la siguiente.

querySelector solo para selectores de CSS

document-object-model

En efecto, al intentar buscar un elemento HTML con atributo ID que tuviera un número X, pues querySelector no podía hallarlo porque no estaba buscando un selector válido para la especificación CSS.

Para completar la tarea tuve que hacerlo de esta forma:

document.getElementById(highlight.page_id);

Pero en realidad el problema tiene que ver con el número en sí, no el selector. Veamos.

Como explican en Stack Overflow, cuando el primer carácter de un identificador es un número, este necesita escaparse basandose en su respectivo código Unicode.

Ejemplo, el código Unicode del número 1 es U+0031. Lo anterior solo quiere decir que para poder haber encontrado la página con querySelector y no con getElementById debí haberlo hecho de esta forma:

document.querySelector("#\\3" + highlight.page_id + " ");

Donde las barras invertidas son la forma de escapar el carácter según la regla:

[PREFIJO][CARÁCTER][ESPACIO EN BLANCO]
\3 1 _

el guion bajo denota un espacio en blanco.

En todo caso, preferí hacerlo con getElementById para que fuera claro todo lo que escribí y no tener que agregar algún comentario explicando porque tuve que utilizar un código Unicode.

Así concluye otra vibrante historia de otro misterio resuelte en el mundo de JavaScript.

Y como muchas cosas que aquí comparto: para la posteridad.

Anuncios

Autor: cesc1989

Ingeniero de Sistemas que le gusta escribir y compartir sobre recursos que considera útiles, además que le gusta leer manga y ver anime.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.