JavaScript QuerySelector | Spiegato
Durante la scrittura di codici HTML e JavaScript, è spesso necessario unire le funzionalità di entrambi i file per eseguire la funzionalità richiesta. In tal caso, il Javascript "QuerySelector ()"Il metodo fa meraviglie nel collegare l'elemento HTML con JavaScript con l'aiuto dell'ID assegnato. Questa funzionalità può essere applicata nei casi in cui si desidera accedere ad elementi HTML specifici per eseguire un'operazione specifica su di essi usando JavaScript.
Questo articolo ti guiderà sul funzionamento del "QuerySelector ()"Metodo in JavaScript.
Cos'è il metodo JavaScript QuerySelector ()?
IL "QuerySelector ()"Il metodo ottiene il primo elemento corrispondente a un selettore CSS. Questo metodo può essere utilizzato per accedere a un determinato elemento, modificare il suo valore su una condizione particolare e visualizzarlo sul modello a oggetto document (DOM).
Come utilizzare il metodo JavaScript QuerySelector ()?
Segui la sintassi di seguito per l'utilizzo del metodo QuerySelector () in JavaScript:
documento.QuerySelector (selettori CSS)
Qui, "Selettori CSS"Si riferisce a uno o più di un selettore CSS.
Ora esamineremo gli esempi per l'implementazione del metodo dichiarato per sviluppare una chiara comprensione.
Esempio 1: applicazione del metodo QuerySelector () per verificare se viene premuto il tasto particolare
Nel seguente esempio, includeremo in primo luogo un campo di input con il seguente valore di segnaposto:
Quindi, aggiungi un intestazione usando " Stato Successivamente, prendi il campo di input creato e l'intestazione specificata con l'aiuto di "QuerySelector ()" metodo: Successivamente, allega l'evento chiamato "keydown" usando il "addEventListener ()"Metodo al campo di input. Infine, applicare la condizione per il controllo della chiave specifica (tab) e restituire il risultato corrispondente sul DOM utilizzando "testo interno" proprietà: Questo programma prenderà innanzitutto il campo di input e l'etichetta aggiunta usando il metodo QuerySelector () e si può osservare che quando viene premuto il tasto Tab, viene modificato il testo interno dell'etichetta aggiunta: Esempio 2: applicazione del metodo QuerySelector () per calcolare le dimensioni di un'immagine Nel seguente esempio, creeremo un pulsante e collegheremo un evento OnClick che accede alla funzione IMGSIZE () quando attivato: Ora, specifica rispettivamente il percorso e l'ID dell'immagine: Successivamente, definisci una funzione chiamata "imgsize ()". Qui, accedi all'immagine e prendi le sue dimensioni usando le proprietà di larghezza e altezza, rispettivamente e visualizzarle nella finestra di dialogo di avviso: Produzione Abbiamo fornito vari esempi per implementare il metodo JavaScript QuerySelector (). Conclusione IL "QuerySelector ()"Il metodo ottiene il primo elemento corrispondente a un selettore CSS. Può essere utilizzato per accedere a un elemento specificando il suo ID come argomento e quindi eseguendo la funzionalità richiesta su di esso usando il codice JavaScript. Questo manuale ha spiegato l'uso del metodo QuerySelector () in JavaScript implementando diversi scenari di casi. Sia input = document.QuerySelector ("Input");
Sia risultato = documento.QuerySelector ("H2");ingresso.addEventListener ("keydown", (e) =>
Se (e.key === "tab")
risultato.InnerText = "Tab Tasto premuto";
altro
risultato.InnerText = "Tab tasto non premuto";
);funzione imgsize ()
var dimensioni = documento.QuerySelector ("#Dim");
var width = dimensioni.larghezza;
var height = dimensioni.altezza;
avviso ("larghezza originale =" + larghezza + "," + "altezza originale =" + altezza);