JavaScript QuerySelector | Forklart
Mens du skriver HTML- og JavaScript -koder, er det ofte påkrevd å slå sammen funksjonalitetene til begge filene for å utføre den nødvendige funksjonaliteten. I et slikt tilfelle JavaScript “QuerySelector ()”Metode gjør underverker i å koble HTML -elementet med JavaScript ved hjelp av den tildelte ID -en. Denne funksjonaliteten kan brukes i tilfeller når du vil få tilgang til spesifikke HTML -elementer for å utføre en spesifikk operasjon på dem ved hjelp av JavaScript.
Denne artikkelen vil veilede deg om arbeidet med "QuerySelector ()”Metode i JavaScript.
Hva er JavaScript querySelector () -metode?
“QuerySelector ()”Metoden får det første elementet som samsvarer med en CSS -velger. Denne metoden kan brukes for å få tilgang til et bestemt element, endre verdien ved en bestemt tilstand og vise den på dokumentobjektmodellen (DOM).
Hvordan bruke JavaScript QuerySector () -metode?
Følg den undergitte syntaks for å bruke QuerySelector () -metoden i JavaScript:
dokument.QuerySelector (CSS Selectors)
Her, “CSS -velgere”Refererer til en eller flere enn en CSS -velgere.
Vi vil nå gå gjennom eksemplene for å implementere den oppgitte metoden for å utvikle en klar forståelse.
Eksempel 1: Bruke metoden QuerySelector () for å sjekke om den aktuelle tasten er trykket på
I det følgende eksemplet vil vi først inkludere et inngangsfelt med følgende plassholderverdi:
Legg deretter til en overskrift ved hjelp av " Status Deretter henter du det opprettede inngangsfeltet og den spesifiserte overskriften ved hjelp av "QuerySelector ()”Metode: Etter det, legg ved hendelsen som heter “Keydown" bruker "AddEventListener ()”Metode til inngangsfeltet. Til slutt, bruk betingelsen for å sjekke den spesifikke tasten (fanen) og returnere det tilsvarende resultatet på DOM ved å bruke "Innertekst”Eiendom: Dette programmet vil først hente inngangsfeltet og den ekstra etiketten ved hjelp av QuerySelector () -metoden, og det kan observeres at når tabbits -tasten trykker på, endres innersteksten til den ekstra etiketten: Eksempel 2: Bruke QuerySelector () -metoden for å beregne dimensjonene til et bilde I det følgende eksemplet vil vi opprette en knapp og legge ved en OnClick -hendelse til den som vil få tilgang til IMGSIZE () -funksjonen når den utløses: Spesifiser nå banen og IDen til bildet henholdsvis: Etter det, definer en funksjon som heter “IMGSIZE ()”. Her får du tilgang til bildet og henter dets dimensjoner ved å bruke henholdsvis bredde- og høydeegenskapene og vise dem på den varslede dialogboksen: Produksjon Vi har gitt forskjellige eksempler for å implementere JavaScript QuerySelector () -metoden. Konklusjon “QuerySelector ()”Metoden får det første elementet som samsvarer med en CSS -velger. Det kan brukes til å få tilgang til et element ved å spesifisere IDen som et argument og deretter utføre den nødvendige funksjonaliteten på det ved hjelp av JavaScript -kode. Denne håndboken forklarte bruken av QuerySector () -metoden i JavaScript ved å implementere forskjellige sakscenarier. La input = dokument.QuerySelector ("Input");
La resultat = dokument.QuerySelector ("H2");inngang.AddEventListener ("KeyDown", (e) =>
hvis (e.tast === "Tab")
resultat.Innertext = "Tab -tastetrykk";
annet
resultat.Innertext = "Tab -tasten ikke trykket på";
);funksjon imgSize ()
var dimensjoner = dokument.querySelector ("#dim");
var bredde = dimensjoner.bredde;
var høyde = dimensjoner.høyde;
Alert ("Original Width =" + Width + "," + "Original Height =" + Height);