JavaScript brukes hovedsakelig til å legge til interaktivt og dynamisk innhold til statiske HTML -sider, men for å legge til et slikt innhold trenger det å få tilgang til HTML -elementene som er til stede i DOM (Document Object Model). JavaScript tilbyr flere forskjellige metoder for å få tilgang til HTML -elementene som er til stede i dokumentet. Her vil vi diskutere i detalj, hva er QuerySelector () metode og hvordan du bruker den:

Hva er QuerySelector () -metode i JavaScript

Vil du søke etter og få tilgang til ethvert element i dokumentet? De QuerySelector () er den perfekte metoden du har fått for den foreslåtte funksjonaliteten.

De QuerySelector () er en metode i JavaScript som spiller en viktig rolle i å søke etter elementer. Det er en metode fra DOM API som lar oss få eller hente et enkelt element som samsvarer med parameteren som blir bestått.

De QuerySelector () Returnerer null hvis det ikke blir funnet noen kamper; Imidlertid, hvis det er to kamper i dokumentet, vil det bare få tilgang til den første forekomsten.

Nå vil vi diskutere syntaksen til QuerySelector () metode før du går videre til eksemplene for å bedre forstå QuerySelector () metode.

Syntaks

element = dokument.QuerySelector (Selector (S));

De QuerySelector () Metoden tar bare en parameter som spesifiserer en eller flere utvalgere; Disse velgerne brukes til å velge det første HTML -elementet basert på dets type, attributt eller verdien av dets attributt, etc.

Her vil vi bruke forskjellige CSS -velgere for å vise hvordan QuerySelector () Metoden fungerer faktisk:

Den universelle velgeren

Asterisk -tegnet (*) er kjent som den universelle velgeren; Det brukes til å få tilgang til alle elementene i dokumentet:

Hallo!

Velkommen til Linux Hint!

Type/tagvelgeren

Vi kan søke etter ethvert element ved å gi verdien av taggen til QuerySelector () metode.

For eksempel, hvis vi ønsker å få “

” Tag fra HTML DOM og endre farge til rød, koden vil gå slik:

Html

Hallo!

Velkommen til Linux Hint!

JavaScript

ID -velgeren

De # Tegn brukes til å velge et element basert på IDen; ID -er skal visstnok være unike, og ingen to elementer på en enkelt HTML -side skal ha samme ID:

For å endre fargen på et HTML-element hvis ID er “Eksempel-ID”, vil koden se slik ut:

Html

Hallo!

Velkommen til Linux Hint!

JavaScript

Klasselektoren

Prikken “.” Sign er velgeren for klasseattributtet som brukes til å velge et element basert på klassen. Flere elementer kan ha samme klasse, men QuerySelector () Metoden vil bare returnere det første elementet:

For å endre bakgrunnsfargen til et HTML-element hvis klasse er “Eksempelklasse”, vil koden se slik ut:

Html

Hallo!

Velkommen til Linux Hint!

JavaScript

Flere velgere

Vi kan gi en kombinasjon av flere velgere QuerySelector () Metode også, disse velgerne bør skilles med komma. Imidlertid vil det bare få tilgang til et enkelt element som skjer først i HTML -kodesekvensen:

Hvis vi for eksempel nevner to HTML -tagger i QuerySelector () -metoden:

Mens HTML -kodene våre er plassert i følgende sekvens

Hallo!

Velkommen til Linux Hint!

JavaScript QuerySector () -metode - Forklart

De QuerySelector () metoden vil bare returnere den første kampen som er

stikkord:

For å få tilgang til flere elementer i JavaScript, brukes QuerySelectorAll () -metoden:

QuerySelectorAll () Metode i JavaScript

Anta at vi ønsker å endre fargen på alle

Tagger hvis klasse er "grønn". HTML og JavaScript vil gå slik:

Html

Velkommen til Linux Hint!

Velkommen til Linux Hint!

Velkommen til Linux Hint!

Velkommen til Linux Hint!

Velkommen til Linux Hint!

JavaScript

Konklusjon

De QuerySelector () Metode er en effektiv måte å få tilgang til HTML -elementer i DOM. JavaScript gir andre metoder for tilgang til DOM -elementer også, men QuerySelector () er den mest allsidige og tilbyr flest alternativer når det gjelder DOM -manipulasjon. Fra introduksjonen til eksemplene har dette innlegget forklart og avklart nesten alle aspekter presist og grundig. Ved hjelp av eksempler har det tydelig beskrevet begrepet QuerySelector () metode.