Javascript QuerySelector | Explicado
Ao escrever códigos HTML e JavaScript, geralmente é necessário mesclar as funcionalidades de ambos os arquivos para realizar a funcionalidade necessária. Nesse caso, o javascript “QuerySelector ()”O método faz maravilhas para vincular o elemento HTML ao JavaScript com a ajuda do ID designado. Essa funcionalidade pode ser aplicada nos casos quando você deseja acessar elementos HTML específicos para executar uma operação específica neles usando JavaScript.
Este artigo o guiará sobre o trabalho do “QuerySelector ()”Método em JavaScript.
O que é o método javascript queryselector ()?
O "QuerySelector ()”O método recebe o primeiro elemento que corresponde a um seletor CSS. Este método pode ser utilizado para acessar um elemento específico, alterar seu valor em uma condição específica e exibi -lo no modelo de objeto de documento (DOM).
Como usar o método javascript querySelector ()?
Siga a sintaxe abaixo dada para utilizar o método querySelector () em JavaScript:
documento.QuerySelector (seletores CSS)
Aqui, "Seletores CSS”Refere -se a um ou mais de um seletores CSS.
Agora, passaremos pelos exemplos para implementar o método declarado para desenvolver um entendimento claro.
Exemplo 1: Aplicação do método querySelector () para verificar se a tecla específica é pressionada
No exemplo a seguir, incluiremos primeiro um campo de entrada com o seguinte valor de espaço reservado:
Em seguida, adicione um título usando o “ Status Em seguida, busque o campo de entrada criado e o cabeçalho especificado com a ajuda do “QuerySelector ()”Método: Depois disso, anexe o evento chamado “keydown”Usando o“addEventListener ()”Método para o campo de entrada. Por fim, aplique a condição para verificar a chave específica (guia) e retornar o resultado correspondente no DOM usando o “InnerText" propriedade: Este programa irá primeiro buscar o campo de entrada e a etiqueta adicionada usando o método querySelector () e pode -se observar que, quando a tecla TAB é pressionada, o interior do rótulo adicionado é alterado: Exemplo 2: Aplicando o método querySelector () para calcular as dimensões de uma imagem No exemplo a seguir, criaremos um botão e anexaremos um evento onclick a ele que acessaremos a função imgSize () quando acionada: Agora, especifique o caminho e o ID da imagem, respectivamente: Depois disso, defina uma função chamada “imgsize ()”. Aqui, acesse a imagem e busque suas dimensões usando as propriedades de largura e altura, respectivamente, e exiba -as na caixa de diálogo alerta: Saída Fornecemos vários exemplos para implementar o método JavaScript querySelector (). Conclusão O "QuerySelector ()”O método recebe o primeiro elemento que corresponde a um seletor CSS. Ele pode ser utilizado para acessar um elemento especificando seu ID como um argumento e depois executando a funcionalidade necessária usando o código JavaScript. Este manual explicou o uso do método querySelector () em JavaScript, implementando diferentes cenários de caso. Deixe input = documento.QuerySelector ("entrada");
Let Result = Documento.QuerySelector ("H2");entrada.addEventListener ("keydown", (e) =>
se (e.chave === "tab")
resultado.INNERTEXT = "Tecla de guia pressionada";
outro
resultado.INNERTEXT = "Tecla de guia não pressionada";
);função imgsize ()
Var Dimensions = Documento.QuerySelector ("#dim");
var largura = dimensões.largura;
altura var = dimensões.altura;
alerta ("largura original =" + largura + "," + "altura original =" + altura);