JavaScript query selector() method – Explicado

JavaScript query selector() method – Explicado

La función querySelector() de JavaScript nos permite seleccionar un elemento en el documento HTML utilizando un selector similar al selector de CSS. Este método es útil para manipular elementos en el DOM y cambiar su contenido, estilo, etc. En este artículo explicaremos cómo funciona la función querySelector() y proporcionaremos algunos ejemplos prácticos de su uso.

📋 Aquí podrás encontrar✍
  1. Sintaxis de querySelector()
  2. Uso de querySelector()
    1. Usando selectores CSS
  3. Ejemplos de uso de querySelector()
    1. Cambiar el contenido de un elemento
    2. Cambiar el estilo de un elemento
    3. Agregar un evento a un elemento
  4. Conclusión
  5. Preguntas frecuentes
    1. ¿Qué es el DOM?
    2. ¿Qué es un selector CSS?
    3. ¿Qué es querySelectorAll()?
    4. ¿Por qué debería usar querySelector() en lugar de getElementById()?

Sintaxis de querySelector()

El método querySelector() se puede llamar en un objeto Document o en un elemento HTMLElement. La sintaxis es la siguiente:

document.querySelector(selector)

Donde 'document' es el objeto Document y 'selector' es una cadena que contiene un selector CSS para el elemento que se quiere seleccionar.

Uso de querySelector()

El método querySelector() devuelve el primer elemento que coincide con el selector especificado. Si no se encuentra ningún elemento, devuelve null. Por ejemplo:

var elem = document.querySelector("#mi_id");

En este ejemplo, la variable 'elem' contendrá el primer elemento con el atributo 'id' igual a 'mi_id'.

Usando selectores CSS

querySelector() admite una amplia gama de selectores CSS, como selectores de clase, selectores de atributo y selectores de pseudo-clase. Por ejemplo, para seleccionar un elemento con una clase 'mi-clase':

var elem = document.querySelector(".mi-clase");

Para seleccionar el primer elemento con un atributo 'href' que comienza con "https":

var elem = document.querySelector('[href^="https"]:first-of-type');

Como se puede ver, los selectores CSS pueden ser bastante detallados y permiten una gran flexibilidad en la selección de elementos en la página.

Ejemplos de uso de querySelector()

Cambiar el contenido de un elemento

document.querySelector("#mi_id").innerHTML = "Nuevo contenido";

En este ejemplo, se selecciona el primer elemento con el atributo 'id' igual a 'mi_id' y se cambia su contenido a "Nuevo contenido".

Cambiar el estilo de un elemento

document.querySelector(".mi-clase").style.color = "red";

En este ejemplo, se selecciona el primer elemento con la clase 'mi-clase' y se cambia su color de texto a rojo.

Agregar un evento a un elemento

document.querySelector("#btn").addEventListener("click", function() { alert("Haz clicado en el botón!"); });

En este ejemplo, se selecciona el primer elemento con el atributo 'id' igual a 'btn' y se le agrega un evento de clic que muestra un mensaje de alerta.

Conclusión

La función querySelector() de JavaScript es muy útil para seleccionar y manipular elementos en el DOM de manera eficiente. La sintaxis simple y los selectores CSS flexibles hacen que sea fácil de aprender y usar. Asegúrate de explorar más funcionalidades, como querySelectorAll() y getElementById(), para poder sacarle el máximo provecho a la manipulación del DOM.

Preguntas frecuentes

¿Qué es el DOM?

El Document Object Model (DOM) es una interfaz de programación para documentos HTML y XML. Permite a los desarrolladores acceder y manipular los contenidos de los documentos HTML y XML como si fueran objetos.

¿Qué es un selector CSS?

Un selector CSS es una cadena que se usa para seleccionar elementos específicos en el HTML. Los selectores CSS permiten seleccionar elementos por su etiqueta, clase, id, atributo, contenido, posición, etc.

¿Qué es querySelectorAll()?

querySelectorAll() es similar a querySelector(), pero devuelve todos los elementos que coinciden con el selector especificado, no solo el primero. Los elementos se devuelven en un objeto NodeList.

¿Por qué debería usar querySelector() en lugar de getElementById()?

querySelector() permite seleccionar elementos por más que solo el atributo 'id', como por ejemplo utilizando selectores de clase o de atributo. getElementById() solo permite seleccionar elementos por su id, lo que hace que querySelector() sea más flexible y poderoso.

Deja una respuesta

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

Subir

Este sitio web utiliza Cookies propias y de terceros de análisis para recopilar información con la finalidad de mejorar nuestros servicios, así como para el análisis de su navegación. Si continua navegando, se acepta el uso y si no lo desea puede configurar el navegador. CÓMO CONFIGURAR