Cómo evitar la frustración eligiendo el selector de JavaScript correcto

Una guía rápida sobre cómo los selectores afectan su código

Mientras trabajaba en un proyecto, me encontré con un problema en mi código. Intenté definir múltiples elementos HTML en una colección y luego cambiar esos elementos en función de algunas condiciones preestablecidas. Luché durante aproximadamente cuatro horas de tiempo de codificación (a lo largo de dos días) depurando mi código e intentando descubrir por qué no estaba obteniendo el resultado deseado.

Resulta que había usado document.querySelectorAll () para asignar mis elementos a una variable, y luego estaba tratando de cambiar esos elementos. El único problema es que ese selector de JavaScript particular devuelve una lista de nodos estáticos. Como no es una representación en vivo de los elementos, no pude cambiarlos más adelante en mi código.

Supuestos

En este artículo, supongo que algunas cosas son ciertas:

  • Estás trabajando en JavaScript "simple o vainilla" (sin marco / biblioteca)
  • Tienes una comprensión básica de los elementos / selectores de JavaScript
  • Tienes una comprensión básica del DOM

El Nitty-arenoso

En el caso de que haya asumido demasiado, he proporcionado enlaces a material relevante dentro del artículo que espero sea útil.

JavaScript es un ecosistema tan vasto y rico que no sorprende que haya muchas formas de realizar la misma tarea. Dependiendo de su tarea, la forma en que se realiza es importante hasta cierto punto.

Puedes cavar un hoyo con las manos, pero es mucho más fácil y eficiente hacerlo con una pala.

Con ese fin, espero "darte una pala" después de leer este artículo.

Elegir la herramienta adecuada para el trabajo

He tenido la pregunta, "¿Qué selector de elementos debo usar?" Varias veces. Hasta ahora, no he tenido muchas ganas o necesidad de aprender la diferencia siempre que mi código haya producido el resultado deseado. Después de todo, ¿qué importa el color del taxi siempre que lo lleve a su destino de manera segura y oportuna ... ¿verdad?

Comencemos con algunas de las formas de seleccionar elementos DOM en JavaScript. Creo que hay más formas de seleccionar elementos, pero las que se enumeran aquí son, con mucho, las más frecuentes que he encontrado.

document.getElementById ()

Estos solo devolverán un (1) elemento porque, por su naturaleza, los ID son únicos y solo puede haber uno (con el mismo nombre) en la página a la vez.

Devuelve un objeto que coincide con la cadena que se le pasa. Devuelve nulo si no se encuentra una identificación coincidente en su HTML.

Ejemplo de sintaxis -> document.getElementById ('main_content')

A diferencia de algunos selectores que veremos más adelante en el artículo, no hay necesidad de un # para indicar la identificación del elemento.

document.getElementsByTagName ()

Observe la "S" en los elementos: este selector devuelve múltiplos en una estructura tipo matriz conocida como una colección HTML: se busca en todo el documento, incluido el nodo raíz (el objeto del documento) para un nombre coincidente. Este selector de elementos comienza en la parte superior del documento y continúa hacia abajo, buscando etiquetas que coincidan con la cadena pasada.

Si está buscando utilizar métodos de matriz nativos, no tiene suerte. Es decir, a menos que convierta los resultados devueltos en una matriz para iterar sobre ellos, o use el operador de propagación ES6, los cuales están más allá del alcance de este artículo. Pero quería que supieras que es posible usar métodos de matriz si lo deseas.

Ejemplo de sintaxis -> document.getElementsByTagName ('header_links'). Este selector también acepta p, div, body o cualquier otra etiqueta HTML válida.

document.getElementsByClassName ()

Selector de nombre de clase: observe nuevamente la "S" en los elementos; este selector devuelve múltiplos en una estructura tipo matriz conocida como una colección HTML de nombres de clase. Coincide con la cadena que se pasa (puede tomar varios nombres de clase, aunque están separados por un espacio), busca en todo el documento, se puede invocar en cualquier elemento y solo devuelve los descendientes de la clase pasada.

También no . (punto) es necesario para indicar el nombre de la clase

Ejemplo de sintaxis -> document.getElementsByClassName ("className")

document.querySelector ()

Este selector solo devolverá un (1) elemento.

Solo se devolverá el primer elemento que coincida con la cadena pasada. Si no se encuentran coincidencias para la cadena proporcionada, se devuelve un valor nulo.

Ejemplo de sintaxis -> document.querySelector (‘# side_note’) o document.querySelector (‘. Header_links’)

A diferencia de todos nuestros ejemplos anteriores, este selector requiere a. (punto) para denotar clase o un # (octothorp) para denotar una ID y funciona con todos los selectores CSS.

document.querySelectorAll ()

Este selector devuelve múltiplos que coinciden con la cadena pasada y los organiza en otra matriz como estructura conocida como lista de nodos.

Al igual que con algunos de los ejemplos anteriores, la lista de nodos no puede utilizar métodos de matriz nativos como .forEach (). Entonces, si desea usarlos, primero debe convertir la lista de nodos en una matriz. Si no desea realizar la conversión, puede iterar sobre la lista de nodos con un enunciado for ...

La cadena aprobada debe coincidir con un selector CSS válido: id, nombres de clase, tipos, atributos, valores de atributos, etc.

Ejemplo de sintaxis -> document.querySelectorAll (‘. Footer_links’)

Terminando

Al elegir el selector adecuado para sus necesidades de codificación, evitará muchos de los escollos en los que he caído. Puede ser increíblemente frustrante cuando su código no funciona, pero al asegurarse de que su selector coincida con sus necesidades situacionales, no tendrá problemas para "cavar con su pala" :)

Gracias por leer esta publicación. Si lo disfrutó, considere donar algunos aplausos para ayudar a otros a encontrarlo también. Publico (gestionando activamente mi agenda para escribir más) contenido relacionado en mi blog. ¡También estoy activo en Twitter y siempre estoy feliz de conectarme con otros desarrolladores!