JavaScript QuerySelector | Explicado
Al escribir códigos HTML y JavaScript, a menudo se requiere fusionar las funcionalidades de ambos archivos para realizar la funcionalidad requerida. En tal caso, el JavaScript "QuerySelector ()El método "hace maravillas al vincular el elemento HTML con JavaScript con la ayuda de la ID asignada. Esta funcionalidad se puede aplicar en los casos en que desea acceder a elementos HTML específicos para realizar una operación específica en ellos utilizando JavaScript.
Este artículo lo guiará sobre el funcionamiento del "QuerySelector ()"Método en JavaScript.
¿Qué es el método JavaScript QuerySelector ()??
El "QuerySelector ()El método "obtiene el primer elemento que coincide con un selector CSS. Este método se puede utilizar para acceder a un elemento particular, cambiar su valor en una condición particular y mostrarlo en el modelo de objeto de documento (DOM).
Cómo usar el método JavaScript QuerySelector ()?
Siga la sintaxis dada a continuación para utilizar el método QuerySelector () en JavaScript:
documento.QuerySelector (selectores CSS)
Aquí, "Selectores CSS"Se refiere a uno o más de un selectores CSS.
Ahora pasaremos por los ejemplos para implementar el método establecido para desarrollar una comprensión clara.
Ejemplo 1: Aplicar el método QuerySelector () para verificar si se presiona la tecla particular
En el siguiente ejemplo, primero incluiremos un campo de entrada con el siguiente valor del marcador de posición:
Luego, agregue un encabezado con el " Estado A continuación, obtenga el campo de entrada creado y el encabezado especificado con la ayuda del "QuerySelector ()" método: Después de eso, adjunte el evento llamado "llave" utilizando el "addEventListener ()"Método para el campo de entrada. Por último, aplique la condición para verificar la clave específica (pestaña) y devolver el resultado correspondiente en el DOM utilizando el "intexto" propiedad: Este programa primero obtendrá el campo de entrada y la etiqueta agregada utilizando el método QuerySelector () y se puede observar que cuando se presiona la tecla Tab, se cambia el texto innecesamiento de la etiqueta agregada: Ejemplo 2: Aplicar el método QuerySelector () para calcular las dimensiones de una imagen En el siguiente ejemplo, crearemos un botón y le conectaremos un evento OnClick que accederá a la función imgSize () cuando se active: Ahora, especifique la ruta y la ID de la imagen respectivamente: Después de eso, defina una función llamada "imgSize ()". Aquí, acceda a la imagen y obtenga sus dimensiones utilizando las propiedades de ancho y altura, respectivamente, y muestrelas en el cuadro de diálogo de alerta: Producción Hemos proporcionado varios ejemplos para implementar el método JavaScript QuerySelector (). Conclusión El "QuerySelector ()El método "obtiene el primer elemento que coincide con un selector CSS. Se puede utilizar para acceder a un elemento especificando su ID como argumento y luego realizando la funcionalidad requerida utilizando el código JavaScript. Este manual explicó el uso del método QuerySelector () en JavaScript mediante la implementación de diferentes escenarios de casos. dejar entrada = documento.QuerySelector ("entrada");
Sea resultado = documento.QuerySelector ("H2");aporte.addEventListener ("Keydown", (e) =>
if (e.clave === "pestaña")
resultado.inntext = "Tabla de tabla presionada";
demás
resultado.inntext = "tecla tab no presionada";
);función imgSize ()
dimensiones var = documento.QuerySelector ("#dim");
ancho var = dimensiones.ancho;
Var altura = dimensiones.altura;
alerta ("ancho original =" + ancho + "," + "original altura =" + altura);