Hvordan legge til attributt til DOM -element i JavaScript

DOM er strukturen til et HTML -dokument fra sitt rotelement til slutten av dokumentet. Ethvert element, for eksempel “p”,“div“, Eller“bord“, Blir referert til som DOM -elementet. DOM -elementene lar brukeren endre innholdet på websiden. Et attributt spesifiserer samlingen av objekter. Dessuten gir JavaScript SetAttribute () -metoder for å legge til eller endre attributtene til DOM -elementer. I dette innlegget har vi demonstrert alle mulige metoder for å legge til attributter til DOM -elementene i JavaScript.

• Hvordan legge til attributt til DOM -element i JavaScript
• Legg til attributt til DOM -elementet
• Legg til flere attributter til DOM -elementet

Hvordan legge til attributt til DOM -element i JavaScript?

SetAttribute () -metoden brukes for å legge til en attributtverdi til et eksisterende element. Hvis attributtet allerede er lagt til, oppdaterer SetAttribute () verdien. Det tar to innganger, den ene er navnet, og det andre spesifiserer verdien. Ved å laste inn nettsiden blir attributtegenskapen brukt på DOM -elementene. Syntaksen til SetAttribute () -metoden er gitt nedenfor:

Syntaks

setAttribute (navn, verdi)

Parametrene er beskrevet som følger:

• Navn: Refererer til attributtnavnet.
• verdi: Angir verdien av attributtet.

Eksempel 1: Legg til et attributt til DOM -elementet

Et eksempel vurderes ved tillegg av en attributt til DOM -elementet. SetAttribute () -metoden brukes for å legge til verdi til attributtet. Eksempelkoden er skrevet nedenfor:

Kode

Eksempel for å legge til attributt til DOM -elementet.

Klikk på knappen for å deaktivere den

Klikk -knappen

Beskrivelsen av koden er gitt nedenfor:

• En knapp som heter “Klikk -knappen”Er vedlagt og har en unik ID”btn”.
• Etter det er denne knappen tilknyttet "btn_fn ()”Metode.
• I denne metoden, “getElementById”Brukes til å trekke ut“btn”Id.
• Endelig "setAttribute ()”Metoden brukes for å deaktivere knappen ved å passere en tømme Den deaktiverer knappen ved å trykke på den.

Produksjon

Det observeres at etter å ha trykket på “Klikk -knappen”, Disabledverdien sendes av“setAttribute ()”Metode.

Eksempel 2: Legg til flere attributter til DOM -elementet

Et eksempel anses å legge til flere attributter til DOM -elementet ved å bruke SetAttribute () -metoden i JavaScript. SetAttribute () -metoden trekker ut DOM -elementene ved getElementById. Etter det, tilordne eiendommen via SetAttribute () -metoden. Disse attributtene inkluderer en knapp for knapp, lenke og styling. For eksempel er koden som følger.

Kode

Eksempel på å legge til en attributt ved hjelp av setAttribute () -metode.

Google.com



Legg til attributt

Beskrivelsen av koden er gitt i følgende rekkefølge:

• For det første et anker “”Tag brukes ved å passere ID”lenke”.
• I denne lenken, “com”Sendes som tekst for visning i nettleseren.
• En knapp "Legg til attributt”Er vedlagt som er assosiert med“moro()”Metode. “func ()”Vil bli utløst av knappen med ved trykk verdi.
• “setAttribute ()”Metode brukes til å hente”lenke" ved hjelp av "getElementById" og en "href”Attributt er satt hvis verdi er“https: // www.Google.com/”.
• Tilsvarende en “stil”Attributt er satt hvis verdi er “Bakgrunnsfarge: rød” for å endre tekstbakgrunnsfargen.

Produksjon

For det første er ikke teksten klikkbar. Etter å ha trykket på knappen “Legg til attributt”, Legges en lenke til teksten“Google.com”Som kan klikkes nå og åpner websiden tilknyttet lenken.

Konklusjon

SetAttribute () -metoden brukes for å legge til en attributt til elementene i JavaScript. Den samme metoden oppdaterer verdien av attributtet hvis DOM -elementet allerede inneholder attributtet. Dette innlegget har demonstrert metodene for å legge til attributter til DOM -elementene i JavaScript. SetAttribTue () -metoden tar et navn og en verdi som argumenter. Dessuten kan brukere sette flere attributter til DOM -elementer ved å bruke JavaScript. Denne artikkelen demonstrerer to eksempler ved å legge til i tillegg til å endre attributtverdien til DOM -elementet i JavaScript.