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.

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.

Método Event Listener del DOM en JavaScript

Cómo Redondear hacia Abajo un Número en JavaScript

Cómo ordenar un arreglo por nombre (alfabéticamente) en JavaScript

Cómo crear un slider de imágenes usando JavaScript

Cómo Obtener Cookies con JavaScript

Obtener el año actual para derechos de autor con JavaScript

Cómo salir de una función de JavaScript

Cómo desplazarse a un ID en JavaScript

Cómo reemplazar todos los espacios en una cadena con '+' en JavaScript