Método del selector de consultas JavaScript - explicado
¿Qué es el método QuerySelector () en JavaScript?
¿Desea buscar y acceder a cualquier elemento dentro del documento?? El QuerySelector () es el método perfecto que tiene para la funcionalidad propuesta.
El QuerySelector () es un método en JavaScript que juega un papel importante en la búsqueda de elementos. Es un método de la API DOM que nos permite obtener o recuperar un solo elemento que coincide con el parámetro que se está pasando.
El QuerySelector () Devuelve nulo si no se encuentran coincidencias; Sin embargo, si hay dos coincidencias en el documento, accederá solo a la primera ocurrencia.
Ahora discutiremos la sintaxis del QuerySelector () método antes de pasar a los ejemplos para comprender mejor el QuerySelector () método.
Sintaxis
elemento = documento.QuerySelector (selector (s));El QuerySelector () El método toma solo un parámetro que especifica uno o más selectores; Estos selectores se utilizan para seleccionar el primer elemento HTML basado en su tipo, atributo o el valor de su atributo, etc.
Aquí usaremos diferentes selectores CSS para mostrar correctamente cómo QuerySelector () El método realmente funciona:
El selector universal
El signo de asterisco (*) se conoce como el selector universal; Se utiliza para acceder a todos los elementos del documento:
Hola!
Bienvenido a Linux Sugerencia!
El tipo/selector de etiquetas
Podemos buscar cualquier elemento pasando el valor de su etiqueta a la QuerySelector () método.
Por ejemplo, si queremos obtener el " "
Html
Hola!
Bienvenido a Linux Sugerencia!
Javascript
El selector de identificación
El # El signo se usa para seleccionar un elemento basado en su ID; Se supone que los ID son únicos y no hay dos elementos en una sola página HTML deben tener la misma ID:
Por ejemplo, para cambiar el color de un elemento HTML cuyo ID es "ID de ejemplo", el código se verá así:
Html
Hola!
Bienvenido a Linux Sugerencia!
Javascript
El selector de clases
El punto "." El signo es el selector del atributo de clase que se utiliza para seleccionar un elemento basado en su clase. Múltiples elementos pueden tener la misma clase pero el QuerySelector () El método solo devolverá el primer elemento:
Por ejemplo, para cambiar el color de fondo de un elemento HTML cuya clase es "clase de ejemplo", el código se verá así:
Html
Hola!
Bienvenido a Linux Sugerencia!
Javascript
Múltiples selectores
Podemos dar una combinación de múltiples selectores el QuerySelector () Método también, estos selectores deben estar separados por comas. Sin embargo, solo accederá a un solo elemento, lo que ocurra primero en la secuencia del código HTML:
Por ejemplo, si mencionamos dos etiquetas HTML en el método QuerySelector ():
Mientras que nuestras etiquetas HTML se colocan en la siguiente secuencia
Hola!
Bienvenido a Linux Sugerencia!
Método JavaScript QuerySelector () - Explicado
El QuerySelector () El método solo devolverá el primer partido que es
etiqueta:
Para acceder a múltiples elementos en JavaScript, se utiliza el método QuerySelectorAll ():
Método QuerySelectorAll () en JavaScript
Supongamos que queremos cambiar el color de todo el
Etiquetas cuya clase es "verde". El HTML y JavaScript irán así:
Html
Bienvenido a Linux Sugerencia!
Bienvenido a Linux Sugerencia!
Bienvenido a Linux Sugerencia!
Bienvenido a Linux Sugerencia!
Bienvenido a Linux Sugerencia!
Javascript
Conclusión
El QuerySelector () El método es una forma eficiente de acceder a elementos HTML en DOM. JavaScript también proporciona otros métodos para acceder a los elementos DOM, pero QuerySelector () es la más versátil y ofrece la mayor cantidad de opciones cuando se trata de manipulación DOM. Desde la introducción a los ejemplos, esta publicación ha explicado y aclarado casi todos los aspectos con precisión y a fondo. Con la ayuda de ejemplos, ha descrito claramente el concepto de la QuerySelector () método.