JavaScript brukes til å legge til interaktivitet til en statisk HTML -side; Men for å legge til interaktivitet må den få tilgang til HTML -elementene som er til stede i DOM. JavaScript tilbyr en rekke metoder for å få tilgang til HTML -elementene som er til stede i DOM. Her vil vi diskutere de fleste av dem i detalj:

Hvordan få tilgang til et DOM -element ved IDen sin ved hjelp av JavaScript

En av de vanligste metodene for å få tilgang til et element i HTML DOM er getElementById () som får tilgang til et element basert på verdien av ID -attributtet. Verdien av ID -attributtene er ment å være unike, og ingen to elementer på en enkelt HTML -side skal ha lignende ID -er. Selv om det er flere elementer som har samme ID, er det getElementById () Metoden returnerer bare ett element (det første elementet med den IDen i HTML -filen).

Nå vil vi se på et eksempel for å bedre forstå hvordan getElementById () Metode fungerer.

Merk: Nettleserkonsollen brukes til demonstrasjon av eksempler i denne artikkelen.

Følgende HTML -fil vil bli brukt til dette eksemplet; JavaScript vil bli lagt til i Tagger som spesielt brukes til å legge inn JavaScript -kode direkte i en HTML -fil.

Hvordan få elementer i JavaScript fra DOM?

Hvordan få tilgang til et DOM -element av ID -en?

getElementById ()

I ovennevnte HTML -fil har vi et avsnitt med en unik ID i.e. Eksempel-id. Hvis vi ønsker å få tilgang til dette avsnittselementet, kan vi bruke getElementById () metode:

Vi kan nå bruke den nyopprettede avsnittsvariabelen for å manipulere Eksempel-id element direkte fra javascript e.g Hvis vi ønsker å endre bakgrunnen og tekstfargen i avsnittet, så:

Hvordan få tilgang til DOM -elementer fra klassen deres

De getElementsByClassName () Metode kan brukes til å få flere elementer som har samme klasse attributtverdi. For å vise hvordan getElementsByClassName () Metode fungerer Vi vil endre HTML -filen vår på følgende måte:

Hvordan få elementer i JavaScript fra DOM?

Hvordan få tilgang til DOM -elementer fra klassen deres?

getElementsByClassName ()

De getElementsByClassName () Metoden returnerer alle elementene som har en spesifikk klasse i form av en matrise. Så hvis vi bare ønsker å endre et av elementene som er til stede i den returnerte matrisen, må vi få tilgang til det med indeksnummeret:

Vi kan bruke en for loop hvis vi ønsker å bruke de samme endringene på alle elementene i matrisen:

Hvordan få tilgang til DOM -elementer med taggen deres

JavaScript gir også getElementsByTagName () Metode som kan brukes til å få tilgang til alle elementene som har samme HTML -tag:

Hvordan få elementer i JavaScript fra DOM?

• getElementById () -metode


• getElementsByClassName () Metode


• getElementsByName () -metode


• getElementsByTagName () -metode


• QuerySelector () -metode


• querySelectorAll () -metode

Vi kan igjen bruke en sløyfe for å bruke de samme endringene på alle elementene som er til stede i den nye matrisen:

Hvordan få tilgang til DOM -elementer ved å bruke spørringens valgmetoder

JavaScript har også QuerySelector () og QuerySelectorAll () Metoder som kan brukes til å få tilgang til HTML DOM -elementer. For å få tilgang til et enkelt element kan vi bruke QuerySelector () metode; Hvis det er flere elementer med samme ID eller klasse, så er QuerySelector () Metoden returnerer det første elementet:

Hvordan få elementer i JavaScript fra DOM?

getElementById () -metode

getElementsByClassName () Metode

getElementsByName () -metode

getElementsByTagName () -metode

QuerySelector () -metode

querySelectorAll () -metode

De # Tegnet er velgeren for ID -attributtet mens . Sign er velgeren for klasseattributtet.

De QuerySelectorAll () Metoden returnerer en matrise som inneholder alle DOM -elementene med et spesifikt klassenavn eller en ID:

Hvordan få elementer i JavaScript fra DOM?

getElementById () -metode

getElementsByClassName () Metode

getElementsByName () -metode

getElementsByTagName () -metode

QuerySelector () -metode

querySelectorAll () -metode

Vi kan utføre forskjellige metoder som for eksempel .for hver() metode på matriser som returneres av QuerySelectorAll (). Disse metodene fungerer ikke med matriser som returneres av GetElement metoder.

Konklusjon

Å få tilgang til HTML DOM-elementer og gjøre dem interaktive gjennom JavaScript er den mest grunnleggende, men likevel en essensiell del av ethvert frontend Develoeps arbeid. Her har vi listet opp de fem vanligste metodene som brukes i JavaScript for å få tilgang til DOM -elementer.