JavaScript getElementById

For å få tilgang til DOM (Document Object Model er et programmerings -API) -element, kan du bruke forskjellige teknikker. En av de mest nyttige og populære metodene er å bruke JavaScript getElementById () -metoden. Alle nettleserne støtter JavaScript getElementById () inkludert Firefox, Internet Explorer, Chrome og så videre.

Denne artikkelen vil diskutere getElementById () -metoden i JavaScript.

Hva er getElementById () i JavaScript?

Å hente et objekt av et HTML -element ved hjelp av dets “id", bruke "dokument.getElementById ()”Metode.Det er den raskeste og mest effektive teknikken for å få tilgang til et DOM -element. Det brukes mest til å manipulere eller få informasjon fra et element i dokumentet.

Merk: Et elements ID skal være unik i et HTML -dokument. Hvis det er mange elementer med samme ID i HTML -dokumentet, gir metoden det første elementet den oppdager. Den sendes ut null hvis den ikke kan finne et element i DOM med den spesifiserte ID -en.

Hvordan bruke getElementById () i JavaScript?

Følg syntaksen nedenfor for bruk av getElementById () -metoden:

dokument.getElementById (ID);

Den godtar en “id”Av elementet du trenger for å utføre litt drift. Denne ekstra IDen skal være unik i et dokument og case-sensitiv.

Eksempel 1: Endre fargen på teksten

I dette eksemplet vil klikke på en knapp føre til at fargen på overskriften endres. For å gjøre det, vil vi lage overskrift ved hjelp av

Tag og sett "Velkommen”Som ID som vil bidra til å få dette elementet:

Velkommen til Linuxhint

Opprett deretter en knapp der OnClick () -hendelsen er vedlagt som vil påkalle JavaScript-brukerdefinerte funksjonen kalt "ChangeColor ()”, Utløs når knappen er klikket:

Klikk her

I JavaScript -filen, definer en funksjon som heter “ChangeColor ()”Det vil først få den ekstra overskriften ved å bruke“getElementById ()”Metode og kaller deretter stilattributtet for å angi fargen lik"Magenta”:

funksjon ChangeColor ()
dokument.getElementById ("Velkommen").stil.farge = "magenta";

Det kan sees fra utgangen når knappen er klikket, fargen på den ekstra overskriften endres:

Eksempel 2: Endre tekst

Her vil vi endre hele teksten på overskriften på knappeklikk. Først vil vi lage en overskrift ved hjelp av

Tag ved å sette ID som “chngtxt”:

Velkommen til Linuxhint

Fest deretter en OnClick () -hendelse med knappen som vil kalle “ChangeText ()”Funksjon for å endre den ekstra teksten:

Klikk her

Definere “ChangeText ()”Funksjon på en slik måte at det vil hente overskriften ved hjelp av dokumentet.getElementById () -metode og endre teksten når knappen er klikket:

funksjon ChangeText ()
var demo = dokument.getElementById ("chngtxt").INNERHTML = "Det beste nettstedet for læringsferdigheter";

Som du kan se i utdataene, når vi klikker på knappen, endres teksten:

Vi har dekket alle detaljene om getElementById () -metoden i JavaScript.

Konklusjon

GetElementById () er JavaScript -metoden som brukes til å hente HTML DOM -elementet. Det er den mest effektive teknikken for å få tilgang til et DOM -element. Den søker i elementet ved hjelp av IDen som er tildelt det. Hvis den spesifiserte IDen ikke er lokalisert i DOM, vil den returnere null. Denne håndboken diskuterte JavaScript -metoden GetElementById () med detaljerte eksempler.