querySelector de JavaScript explicado: sintaxis, selectores avanzados, buenas prácticas y ejemplos

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introducción: ¿Qué es querySelector?

Visión general básica y rol de querySelector

querySelector es un método que devuelve el primer elemento que coincide con el selector especificado.

Veamos el ejemplo a continuación.

const element = document.querySelector('.example');
console.log(element);

Este código obtiene el primer elemento con el nombre de clase example.

Aunque existan varios elementos para el mismo selector, solo se devuelve el primer elemento coincidente.

<div class="example">1</div>
<div class="example">2</div>

En este caso, solo se seleccionará el primer <div class="example">1</div>.

Por qué querySelector es importante en la manipulación del DOM

querySelector es especialmente útil en situaciones como las siguientes.

1. Selección flexible de elementos usando selectores CSS * Soporta una amplia gama de selectores como clases, IDs, atributos y pseudo‑clases.

2. Código limpio incluso para estructuras complejas * Encuentra eficientemente elementos anidados o elementos con atributos específicos.

3. Estilo JavaScript consistente y moderno * Más versátil que getElementById o getElementsByClassName, y funciona bien con los patrones modernos de JavaScript.

Aquí hay un ejemplo de cómo seleccionar un botón específico dentro de un formulario.

const submitButton = document.querySelector('form button[type="submit"]');
console.log(submitButton);

Este código selecciona solo el botón de envío dentro del formulario.

Diferencia entre querySelector y querySelectorAll

Mientras que querySelector devuelve solo el primer elemento coincidente, querySelectorAll devuelve todos los elementos coincidentes como un NodeList.

const elements = document.querySelectorAll('.example');
console.log(elements);

Este código recupera todos los elementos con el nombre de clase example.

Resumen

En esta sección, explicamos el concepto básico y el rol del método querySelector de JavaScript.

Puntos clave:

1. Puedes seleccionar elementos de forma flexible usando selectores CSS
2. querySelector devuelve solo la primera coincidencia, mientras que querySelectorAll devuelve todas las coincidencias
3. Es un método importante para una manipulación del DOM concisa y eficiente

En la siguiente sección, analizaremos más de cerca la sintaxis básica de querySelector y ejemplos prácticos de uso.

2. Sintaxis básica y uso de querySelector

Sintaxis básica

La sintaxis básica de querySelector es la siguiente:

document.querySelector(selector);

• Argumento: una cadena de selector CSS.
• Valor de retorno: el primer elemento que coincide con el selector. Si no se encuentra coincidencia, devuelve null.

Ejemplos: Selección de elementos básicos

1. Seleccionar por ID Dado que un ID es único, puedes seleccionar de forma fiable exactamente un elemento.

   const element = document.querySelector('#header');
   console.log(element);
   

Este código selecciona el elemento con el ID header.

2. Seleccionar por clase Cuando especificas un nombre de clase, solo se devuelve el primer elemento coincidente.

   const element = document.querySelector('.content');
   console.log(element);
   

Este código selecciona el primer elemento con el nombre de clase content.

3. Seleccionar por nombre de etiqueta También puedes seleccionar elementos especificando un nombre de etiqueta.

   const element = document.querySelector('p');
   console.log(element);
   

Este código selecciona la primera etiqueta <p> de la página.

Selección de elementos con selectores combinados

Al combinar selectores CSS, puedes apuntar a los elementos de forma más flexible.

1. Selectores anidados Selecciona elementos especificando una relación padre‑hijo.

   const element = document.querySelector('div.container p');
   console.log(element);
   

Este código selecciona la primera etiqueta <p> dentro de un <div> con el nombre de clase container.

2. Selectores de atributos Selecciona elementos que tengan un atributo específico.

   const element = document.querySelector('input[type="text"]');
   console.log(element);
   

Este código selecciona el primer elemento <input> cuyo atributo type es text.

3. Uso de pseudo‑clases Utiliza pseudo‑clases para seleccionar elementos en un estado o posición particular.

   const element = document.querySelector('li:first-child');
   console.log(element);
   

Este código selecciona el primer elemento <li>.

Qué hacer cuando querySelector no puede encontrar un elemento

querySelector devuelve null cuando no se encuentra ningún elemento que coincida. Por esta razón, es importante comprobar si el elemento existe después de seleccionarlo.

const element = document.querySelector('.nonexistent');
if (element) {
  console.log('Element found');
} else {
  console.log('Element not found');
}

Este código funciona de forma segura sin lanzar un error incluso cuando el elemento no existe.

Resumen

En esta sección, cubrimos la sintaxis básica y el uso de querySelector.

Resumen rápido:

1. Puedes seleccionar fácilmente elementos por ID, clase o nombre de etiqueta
2. Puedes seleccionar de forma flexible elementos combinando selectores complejos y pseudo‑clases
3. El manejo de errores para elementos ausentes también es importante

En la siguiente sección, profundizaremos en ejemplos de uso avanzado con selectores más potentes.

3. Ejemplos avanzados: cómo usar selectores más potentes

Seleccionar elementos específicos con selectores de atributos

Los selectores de atributos te permiten seleccionar de forma flexible elementos que tienen atributos o valores específicos.

1. Seleccionar un elemento con un valor de atributo específico

   const checkbox = document.querySelector('input[type="checkbox"]');
   console.log(checkbox);
   

Este código selecciona el primer elemento <input> cuyo atributo type es checkbox.

2. Utilizar coincidencias parciales para valores de atributos

   const link = document.querySelector('a[href^="https://"]');
   console.log(link);
   

Este código selecciona un enlace cuyo atributo href comienza con https://.

Selectores de atributos de uso frecuente:

Selección con pseudo‑clases y pseudo‑elementos

Las pseudo‑clases y pseudo‑elementos facilitan la selección de elementos en estados o posiciones específicas.

1. Pseudo‑clases para estado

   const activeLink = document.querySelector('a.active');
   console.log(activeLink);
   

Este código selecciona un enlace que tiene la clase active.

2. Pseudo‑clases para posición

   const firstItem = document.querySelector('ul > li:first-child');
   console.log(firstItem);
   

Este código selecciona el primer elemento de la lista.

Pseudo‑clases de uso frecuente:

Filtrado fino con selectores compuestos

También puedes combinar varios selectores para expresar condiciones más complejas.

1. Filtrar por relación padre‑hijo

   const nestedElement = document.querySelector('div.container > p.text');
   console.log(nestedElement);
   

Este código selecciona el primer elemento p con la clase text dentro de un elemento div con la clase container.

2. Combinar múltiples condiciones

   const inputField = document.querySelector('input[type="text"].required');
   console.log(inputField);
   

Este código selecciona el primer elemento <input> que tiene type="text" y también la clase required.

Resumen

En esta sección, explicamos el uso avanzado de selectores con querySelector.

Puntos clave:

1. Los selectores de atributos permiten un filtrado flexible de los elementos
2. Las pseudo‑clases y pseudo‑elementos te permiten apuntar al estado y la posición
3. Los selectores compuestos facilitan especificar condiciones detalladas y seleccionar objetivos complejos

En la siguiente sección, cubriremos precauciones importantes y buenas prácticas al usar querySelector.

4. Precauciones y buenas prácticas al usar querySelector

Manejo de errores y comprobaciones de null

Si ningún elemento coincide con el selector especificado, querySelector devuelve null. Por esa razón, siempre debes confirmar que el elemento exista antes de intentar manipularlo.

Ejemplo: Implementar una comprobación de null

const element = document.querySelector('.nonexistent');
if (element) {
  console.log('Element found');
  element.textContent = 'New text';
} else {
  console.log('Element not found');
}

Este código evita errores de forma segura incluso si el elemento no existe.

Escapando caracteres especiales

Si tu selector contiene caracteres especiales, querySelector puede lanzar un error a menos que los escapes correctamente.

Ejemplo: Seleccionar un elemento que contiene caracteres especiales

HTML:

<div id="my.id">Special ID</div>

JavaScript:

const element = document.querySelector('#my\.id');
console.log(element);

Al manejar caracteres especiales (p. ej., ., #, [, ], etc.), escápalos usando una barra invertida (\).

Consideraciones de rendimiento

1. Evita selectores profundamente anidados A medida que los selectores se vuelven más complejos, el navegador puede tardar más en encontrar el elemento objetivo. Usa selectores más simples siempre que sea posible.

No recomendado

const element = document.querySelector('div.container > ul > li.item > span.text');

Recomendado

const container = document.querySelector('.container');
const textElement = container.querySelector('.text');

2. Selecciona múltiples elementos de forma eficiente Usa querySelectorAll para obtener todos los elementos objetivo y luego filtrarlos según sea necesario.

   const items = document.querySelectorAll('.item');
   items.forEach((item) => {
     console.log(item.textContent);
   });
   

Mejores prácticas

1. Utiliza selectores específicos Usa selectores específicos para asegurarte de seleccionar solo el(los) elemento(s) deseado(s).

   const button = document.querySelector('button.submit');
   

2. Utiliza convenciones de nombres consistentes Diseña nombres de clases CSS e IDs siguiendo reglas consistentes para mejorar la legibilidad de los selectores.

3. Enfócate en código reutilizable Si seleccionas con frecuencia ciertos elementos, es conveniente encapsular la lógica en una función reutilizable.

   function getElement(selector) {
     const element = document.querySelector(selector);
     if (!element) {
       console.warn(`Element not found: ${selector}`);
     }
     return element;
   }
   
   const header = getElement('#header');
   

Resumen

En esta sección, cubrimos precauciones clave y formas eficientes de usar querySelector.

Puntos clave:

1. Prevén errores realizando comprobaciones de nulidad de forma constante
2. Escapa correctamente los selectores que incluyen caracteres especiales
3. Diseña selectores de forma simple teniendo en cuenta el rendimiento
4. Utiliza funciones y convenciones de nombres para mejorar la reutilización y la legibilidad

En la siguiente sección, presentaremos ejemplos prácticos que son útiles en proyectos reales.

5. Preguntas frecuentes (FAQ) y soluciones

¿Cuál es la diferencia entre querySelector y getElementById?

Pregunta:
querySelector y getElementById pueden usarse para seleccionar elementos. ¿Cuál es la diferencia entre ellos?

Respuesta:

Comparación de uso:

// With querySelector
const element1 = document.querySelector('#example');

// With getElementById
const element2 = document.getElementById('example');

¿Cuál deberías usar?

• Para selección simple basada en ID, getElementById es rápido y recomendado.
• Cuando necesitas una selección flexible basada en selectores, usa querySelector .

¿Por qué a veces querySelector no funciona?

Pregunta:
Aunque mi código parece correcto, querySelector no funciona. ¿Cuál podría ser la razón?

Respuesta:

1. El elemento aún no existe en el DOM

• El DOM puede no estar completamente cargado cuando se ejecuta el script. Solución : Usa el evento DOMContentLoaded.

  document.addEventListener('DOMContentLoaded', () => {
    const element = document.querySelector('.example');
    console.log(element);
  });
  

2. El selector es incorrecto

• El nombre de la clase o el ID podrían estar equivocados.

Qué verificar:

• Verifica el selector en las herramientas de desarrollo de tu navegador.

  const element = document.querySelector('.my-class');
  console.log(element); // Check the result in DevTools
  

3. El elemento se agrega dinámicamente

• Si el elemento se agrega dinámicamente mediante JavaScript, puede que no exista en el momento en que intentes seleccionarlo por primera vez.

Solución:
Adjunta un listener de eventos a un elemento padre para manejar los elementos agregados dinámicamente.

document.body.addEventListener('click', (e) => {
  if (e.target.matches('.dynamic-element')) {
    console.log('Clicked');
  }
});

Cómo acceder a los elementos agregados dinámicamente

Pregunta:
¿Se pueden seleccionar los elementos agregados dinámicamente con querySelector?

Respuesta:
Sí, pueden. Sin embargo, debes prestar atención al momento en que el elemento se agrega.

Solución 1: Observar elementos dinámicos

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.addedNodes.length) {
      const newElement = document.querySelector('.dynamic-element');
      if (newElement) {
        console.log('A new element was added:', newElement);
      }
    }
  });
});

observer.observe(document.body, { childList: true, subtree: true });

Solución 2: Usar setTimeout o setInterval

Si el elemento se agrega después de un cierto retraso, puedes monitorizarlo así:

setTimeout(() => {
  const dynamicElement = document.querySelector('.dynamic-element');
  console.log(dynamicElement);
}, 1000); // Check for the element after 1 second

Resumen

En esta sección, cubrimos preguntas comunes y consejos de solución de problemas para usar querySelector.

Resumen rápido:

1. Entiende cuándo usar querySelector vs. getElementById.
2. Si no funciona, verifica el momento de carga del DOM y los errores de selector.
3. Para elementos dinámicos, usa delegación de eventos o MutationObserver.

En la siguiente sección, resumiremos los puntos clave para usar querySelector de manera eficaz.

6. Ejemplos prácticos: Cómo usar querySelector en proyectos reales

Obtener valores de entrada de formulario y validarlos

Escenario: Cuando un usuario ingresa valores en un formulario, los recuperas y realizas la validación.

HTML

<form id="userForm">
  <input type="text" id="username" placeholder="Username">
  <input type="email" id="email" placeholder="Email address">
  <button type="submit">Submit</button>
</form>

JavaScript

const form = document.querySelector('#userForm');

form.addEventListener('submit', (event) => {
  event.preventDefault(); // Prevent form submission

  const username = document.querySelector('#username').value;
  const email = document.querySelector('#email').value;

  if (!username) {
    alert('Please enter a username');
    return;
  }

  if (!email.includes('@')) {
    alert('Please enter a valid email address');
    return;
  }

  alert('The form was submitted successfully');
});

Puntos clave:

• Usa la propiedad value para obtener los valores de entrada.
• Realiza comprobaciones de validación simples sobre la entrada del usuario.
• Usa listeners de eventos para personalizar el comportamiento del envío del formulario.

Cómo agregar listeners de eventos a elementos agregados dinámicamente

Escenario: Aplicar listeners de eventos a elementos que se agregan dinámicamente mediante JavaScript.

HTML

<div id="container">
  <button id="addButton">Add a button</button>
</div>

JavaScript

const container = document.querySelector('#container');
const addButton = document.querySelector('#addButton');

// Add a new button
addButton.addEventListener('click', () => {
  const newButton = document.createElement('button');
  newButton.classList.add('dynamic-button');
  newButton.textContent = 'Click me!';
  container.appendChild(newButton);
});

// Capture events on the parent element
container.addEventListener('click', (event) => {
  if (event.target.classList.contains('dynamic-button')) {
    alert('The new button was clicked!');
  }
});

Puntos clave:

• Dado que los elementos añadidos dinámicamente no pueden ser referenciados directamente, adjunta el listener de eventos a un elemento padre.
• Usa event.target para identificar qué elemento se hizo clic.

Abrir y cerrar una ventana modal

Escenario: Implementar el comportamiento de apertura/cierre del modal.

HTML

<div id="modal" class="modal hidden">
  <div class="modal-content">
    <span id="closeModal" class="close">&times;</span>
    <p>This is the modal content.</p>
  </div>
</div>
<button id="openModal">Open modal</button>

CSS

.hidden {
  display: none;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
}

JavaScript

const modal = document.querySelector('#modal');
const openModal = document.querySelector('#openModal');
const closeModal = document.querySelector('#closeModal');

// Open the modal
openModal.addEventListener('click', () => {
  modal.classList.remove('hidden');
});

// Close the modal
closeModal.addEventListener('click', () => {
  modal.classList.add('hidden');
});

// Close when clicking outside the modal
modal.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.classList.add('hidden');
  }
});

Puntos clave:

• Usa classList para agregar/quitar clases y alternar la visibilidad.
• Mejora la UX permitiendo que el modal se cierre al hacer clic fuera del área de contenido.

Resumen

En esta sección, presentamos ejemplos prácticos de cómo usar querySelector en escenarios reales de desarrollo.

Lo que aprendiste:

1. Implementar un manejo seguro de formularios recuperando y validando la entrada del usuario.
2. Manejar elementos añadidos dinámicamente de forma flexible usando delegación de eventos.
3. Mejorar la UI implementando el comportamiento de apertura/cierre del modal.

Utiliza estos ejemplos como referencia y aplícalos a tus propios proyectos de desarrollo. En la siguiente sección, concluiremos el artículo resumiendo los puntos clave para usar querySelector.

7. Resumen: Puntos clave para usar querySelector de manera eficaz

En este artículo, cubrimos en detalle el método querySelector de JavaScript, desde lo básico hasta casos de uso avanzados. Finalmente, revisemos los puntos más importantes y resumamos cómo usarlo de manera eficaz.

El papel fundamental de querySelector

• Selección flexible de elementos: Puedes seleccionar eficientemente elementos del DOM usando selectores CSS.
• Sintaxis simple: Puedes seleccionar elementos de forma intuitiva usando nombres de clase, IDs, nombres de etiqueta y selectores de atributos.
• Funciona con elementos dinámicos: Al adjuntar listeners de eventos a elementos padres, puedes manejar elementos añadidos posteriormente.

Ejemplo de la sintaxis básica:

const element = document.querySelector('.example');

Uso avanzado y consideraciones importantes

1. Usa selectores avanzados

• Los selectores de atributos y pseudo‑clases te permiten apuntar a elementos de forma más precisa y flexible.
• Ejemplo:

  const element = document.querySelector('input[type="checkbox"]:checked');
  

2. Escribe código consciente del rendimiento

• Reduce la sobrecarga de procesamiento usando selectores simples siempre que sea posible.
• Convierte la lógica de selección frecuentemente usada en funciones reutilizables.

2. Manejo exhaustivo de errores

• Realiza verificaciones de null y maneja los casos en que el elemento no exista.
• Ejemplo:

  const element = document.querySelector('.nonexistent');
  if (element) {
    console.log('Element found');
  } else {
    console.log('Element not found');
  }
  

Revisando los ejemplos prácticos

• Validación de formularios: Valida los valores de entrada para implementar un procesamiento seguro del formulario.
• Manejo de elementos dinámicos: Maneja de forma flexible los elementos generados mediante JavaScript.
• Control de ventana modal: Añade comportamiento interactivo para mejorar la UI/UX.

A través de estos ejemplos, aprendiste la practicidad y extensibilidad de querySelector.

Consejos para sacarle el máximo provecho a querySelector

1. Aprovecha tus herramientas de desarrollo

• Utiliza las herramientas de desarrollo de tu navegador para validar y probar selectores.

1. Prioriza la legibilidad

• Diseña los nombres de los selectores y la estructura del código para que sean fáciles de entender, mejorando el mantenimiento.

1. Usa querySelectorAll cuando sea necesario

• Cuando trabajes con múltiples elementos, emplea querySelectorAll para implementar un procesamiento eficiente.

Resumen

querySelector es un método potente que hace que la manipulación del DOM sea simple y eficiente.

Principales conclusiones de este artículo:

• Puedes comprender todo, desde el uso básico hasta ejemplos avanzados, de manera estructurada.
• Al combinar selectores y pseudo‑clases, puedes dirigirte a los elementos con mayor flexibilidad.
• Al manejar errores correctamente y considerar el rendimiento, puedes escribir código más práctico y fiable.

Al trabajar con la manipulación del DOM en JavaScript, asegúrate de aplicar las técnicas introducidas en este artículo.

Como siguiente paso, profundiza tu conocimiento sobre la manipulación del DOM y mejora tus habilidades aprendiendo a combinar querySelector con otros métodos.