El querySelector es un método JavaScript que juega un papel vital en la búsqueda de elementos.
En esta sección, comprenderemos y discutiremos el método querySelector (), su uso y también veremos un ejemplo para comprender el concepto del método querySelector () de manera práctica.
Presentamos el método querySelector () de JavaScript
Un método de interfaz de elementos que nos permite buscar y devolver el primer elemento dentro del documento. Encuentra el elemento que coincide con cualquiera de los selectores CSS o grupo de selectores especificados. Sin embargo, si no se encuentra ningún elemento coincidente, devuelve nulo. El método querySelector () es el método de la interfaz Documento únicamente. Una interfaz de documento es una interfaz que describe los métodos comunes, así como las propiedades de cualquier html, XML o cualquier otro tipo de documento.
¿Cómo realiza la búsqueda el método querySelector()?
Sabemos que existen diferentes tipos de búsquedas que se pueden utilizar para buscar elementos. Sin embargo, el método querySelector () utiliza pedido anticipado en profundidad recorrido de los nodos del documento. En él, el recorrido comienza con el primer elemento en el marcado del documento y luego recorre los nodos secuenciales por orden del número de nodos secundarios.
si por rudyard kipling explicación línea por línea
Sintaxis
element = document.querySelector(selectors);
El método querySelector () es un método de interfaz de documento y por eso tiene esa sintaxis.
Tiene un parámetro, 'selectores', que es una cadena DOM y tiene uno o más selectores CSS válidos.
Tipo de devolución
Puede devolver 'nulo' si no se encuentra ninguna coincidencia, y si el primer elemento coincide con los selectores CSS especificados (si los hay), devolverá ese elemento.
Sin embargo, si no hay ningún selector CSS válido, se generará una excepción 'SyntaxError'.
Ahora, antes de ver una implementación de ejemplo, debemos conocer varios tipos de selectores CSS. Si no lo sabes, visita nuestro https://www.javatpoint.com/css-selector sección del tutorial de CSS.
Entonces, ahora implementaremos un ejemplo en el que cubriremos un selector CSS y conservaremos el valor del primer elemento utilizando el método querySelector ().
Implementación de querySelector () Ejemplo
A continuación se muestra un código de ejemplo que nos hará comprender el funcionamiento del método querySelector ():
class='colors'>Colors <p> Myclass</p> <p> It is the div p paragraph</p> <p> div p class</p> <p id="myid"> It is p id</p> It is div id //Element selector var e = document.querySelectorAll ('p'); console.log(e);
Ahora, puede ver la diferencia entre el código que en el primer ejemplo usamos el método querySelector () y generó solo el primer valor del selector coincidente. Pero, cuando observe el resultado de este segundo ejemplo, verá que ha devuelto todos los valores coincidentes de los selectores o grupo de selectores especificados. El resultado del código anterior se muestra a continuación:
Explicación del código
árbol binario en java
- El código anterior es una combinación de html y JavaScript.
- Hemos implementado diferentes selectores de CSS en el código.
- En la sección de JavaScript, hemos utilizado un método querySelectorAll() e invocado un selector de elementos de CSS.
- Entonces, el método querySelectorAll () ahora pasa al código para recorrerlo usando el método de pedido previo en profundidad y devuelve todos los valores de los elementos coincidentes que se especifican como parámetros del método querySelectorAll ().
Entonces, de la misma manera, también podemos usar el método querySelectorAll () para los otros tipos de selectores CSS, y devolverá todos los valores coincidentes de los selectores que se especifican como su argumento. Para implementar el método, reemplace el método querySelector () con el método querySelectorAll () para varios selectores, y el método encontrará la coincidencia y devolverá al menos un valor coincidente del elemento especificado.