Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Arbeide med Elementattributter i DOM-en | DOM-Manipulering for Interaktiv Webutvikling
Avansert JavaScript-mestring

bookArbeide med Elementattributter i DOM-en

Attributter er verdier som legges til HTML-elementer for å gi tilleggsinformasjon eller endre deres oppførsel. JavaScript tilbyr flere metoder for å arbeide med disse attributtene, slik at du dynamisk kan hente, sette, fjerne eller kontrollere spesifikke attributter.

GetAttribute()

getAttribute() brukes for å hente verdien til et spesifisert attributt fra et element. Dette er nyttig når du trenger tilgang til bestemte attributtverdier som href, src, class osv.

index.html

index.html

index.js

index.js

copy

Henter verdien til href-attributtet for anker-elementet (<a>).

SetAttribute()

setAttribute() brukes til å legge til et nytt attributt eller endre verdien til et eksisterende attributt på et element.

index.html

index.html

index.js

index.js

copy

Setter eller oppdaterer alt-attributtet til bildet, noe som muliggjør dynamiske endringer basert på brukerhandlinger eller applikasjonslogikk.

RemoveAttribute()

removeAttribute() fjerner et spesifisert attributt fra et element, og er nyttig for betinget veksling av attributter basert på bestemte hendelser eller tilstander.

index.html

index.html

index.js

index.js

copy

Fjerner attributten disabled, slik at knappen blir tilgjengelig for interaksjon.

HasAttribute()

hasAttribute() kontrollerer om et element har en angitt attributt. Denne metoden er spesielt nyttig for betinget logikk, og sikrer at bestemte attributter eksisterer før videre handling utføres.

index.html

index.html

index.js

index.js

copy

Sjekker om required-attributtet finnes på inndatafeltet og logger en melding deretter.

Forskjeller mellom egenskaper og attributter

Selv om egenskaper og attributter ofte brukes om hverandre, har de ulike roller i DOM-en. La oss se nærmere på forskjellene.

index.html

index.html

index.js

index.js

copy
  • Attributtet value beholder den opprinnelige verdien definert i HTML;
  • Egenskapen value gjenspeiler den nåværende, dynamisk oppdaterte tilstanden til input-feltet.

Praktisk eksempel: Håndtering av produktdetaljer på en nettbutikk

Tenk deg at du har en seksjon for produktdetaljer hvor brukere kan oppdatere produktinformasjon som tilgjengelighet, fremhevet status og fraktalternativer. Dette eksemplet viser hvordan attributter brukes til å kontrollere disse aspektene dynamisk.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Metoden setAttribute() brukes til dynamisk å legge til spesifikke attributter på elementer basert på brukerhandlinger. For eksempel, når tilgjengelighetsstatusen endres til "Out of Stock", legger setAttribute() til en out-of-stock-klasse for å gi unik stil. På samme måte legger den til et data-featured-attributt på avkrysningsboksen for fremhevet produkt når produktet markeres som fremhevet.

Metoden removeAttribute() fjerner disse attributtene når de ikke lenger er nødvendige. For eksempel fjerner den out-of-stock-klassen når statusen endres tilbake til "In Stock", og fjerner data-featured-attributtet hvis produktet ikke lenger er markert som fremhevet. I tillegg brukes removeAttribute() til å veksle synligheten av fraktinformasjon ved å legge til eller fjerne attributtet hidden.

Til slutt brukes hasAttribute() for å kontrollere om disse attributtene er til stede, for eksempel ved å verifisere om data-featured-attributtet eksisterer før oppdatering av fremhevet status, eller ved å sjekke hidden-attributtet på fraktinformasjon for å avgjøre synlighetstilstanden.

1. Hvilken metode brukes for å hente verdien til et attributt fra et element?

2. Hva gjør metoden setAttribute()?

3. Hva vil følgende kode skrive ut?

question mark

Hvilken metode brukes for å hente verdien til et attributt fra et element?

Select the correct answer

question mark

Hva gjør metoden setAttribute()?

Select the correct answer

question mark

Hva vil følgende kode skrive ut?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 7

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Suggested prompts:

Can you explain the main differences between attributes and properties in more detail?

How do I use these attribute methods in a real JavaScript example?

What are some common mistakes when working with attributes and properties?

Awesome!

Completion rate improved to 2.22

bookArbeide med Elementattributter i DOM-en

Sveip for å vise menyen

Attributter er verdier som legges til HTML-elementer for å gi tilleggsinformasjon eller endre deres oppførsel. JavaScript tilbyr flere metoder for å arbeide med disse attributtene, slik at du dynamisk kan hente, sette, fjerne eller kontrollere spesifikke attributter.

GetAttribute()

getAttribute() brukes for å hente verdien til et spesifisert attributt fra et element. Dette er nyttig når du trenger tilgang til bestemte attributtverdier som href, src, class osv.

index.html

index.html

index.js

index.js

copy

Henter verdien til href-attributtet for anker-elementet (<a>).

SetAttribute()

setAttribute() brukes til å legge til et nytt attributt eller endre verdien til et eksisterende attributt på et element.

index.html

index.html

index.js

index.js

copy

Setter eller oppdaterer alt-attributtet til bildet, noe som muliggjør dynamiske endringer basert på brukerhandlinger eller applikasjonslogikk.

RemoveAttribute()

removeAttribute() fjerner et spesifisert attributt fra et element, og er nyttig for betinget veksling av attributter basert på bestemte hendelser eller tilstander.

index.html

index.html

index.js

index.js

copy

Fjerner attributten disabled, slik at knappen blir tilgjengelig for interaksjon.

HasAttribute()

hasAttribute() kontrollerer om et element har en angitt attributt. Denne metoden er spesielt nyttig for betinget logikk, og sikrer at bestemte attributter eksisterer før videre handling utføres.

index.html

index.html

index.js

index.js

copy

Sjekker om required-attributtet finnes på inndatafeltet og logger en melding deretter.

Forskjeller mellom egenskaper og attributter

Selv om egenskaper og attributter ofte brukes om hverandre, har de ulike roller i DOM-en. La oss se nærmere på forskjellene.

index.html

index.html

index.js

index.js

copy
  • Attributtet value beholder den opprinnelige verdien definert i HTML;
  • Egenskapen value gjenspeiler den nåværende, dynamisk oppdaterte tilstanden til input-feltet.

Praktisk eksempel: Håndtering av produktdetaljer på en nettbutikk

Tenk deg at du har en seksjon for produktdetaljer hvor brukere kan oppdatere produktinformasjon som tilgjengelighet, fremhevet status og fraktalternativer. Dette eksemplet viser hvordan attributter brukes til å kontrollere disse aspektene dynamisk.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Metoden setAttribute() brukes til dynamisk å legge til spesifikke attributter på elementer basert på brukerhandlinger. For eksempel, når tilgjengelighetsstatusen endres til "Out of Stock", legger setAttribute() til en out-of-stock-klasse for å gi unik stil. På samme måte legger den til et data-featured-attributt på avkrysningsboksen for fremhevet produkt når produktet markeres som fremhevet.

Metoden removeAttribute() fjerner disse attributtene når de ikke lenger er nødvendige. For eksempel fjerner den out-of-stock-klassen når statusen endres tilbake til "In Stock", og fjerner data-featured-attributtet hvis produktet ikke lenger er markert som fremhevet. I tillegg brukes removeAttribute() til å veksle synligheten av fraktinformasjon ved å legge til eller fjerne attributtet hidden.

Til slutt brukes hasAttribute() for å kontrollere om disse attributtene er til stede, for eksempel ved å verifisere om data-featured-attributtet eksisterer før oppdatering av fremhevet status, eller ved å sjekke hidden-attributtet på fraktinformasjon for å avgjøre synlighetstilstanden.

1. Hvilken metode brukes for å hente verdien til et attributt fra et element?

2. Hva gjør metoden setAttribute()?

3. Hva vil følgende kode skrive ut?

question mark

Hvilken metode brukes for å hente verdien til et attributt fra et element?

Select the correct answer

question mark

Hva gjør metoden setAttribute()?

Select the correct answer

question mark

Hva vil følgende kode skrive ut?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 7
some-alt