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

bookUtforsking av DOM-Egenskaper i JavaScript

JavaScript tilbyr flere egenskaper for å få tilgang til og manipulere innholdet. Forståelse av disse egenskapene gjør det mulig å oppdatere innholdet på nettsider dynamisk basert på brukerinteraksjoner eller andre betingelser.

InnerHTML

Egenskapen innerHTML gjør det mulig å hente eller sette HTML-innholdet til et element, inkludert tagger og tekst. Dette er en av de mest brukte egenskapene for dynamisk oppdatering av sideinnhold.

index.html

index.html

index.js

index.js

copy

innerHTML henter alt innhold, inkludert HTML-tagger, og gir mulighet for å sette inn eller oppdatere innhold med HTML-tagger.

TextContent

Egenskapen textContent henter eller setter tekstinnholdet til et element, og fjerner alle HTML-tagger. Ideell når det kun skal arbeides med ren tekst uten hensyn til HTML-strukturen.

index.html

index.html

index.js

index.js

copy

textContent henter kun tekstinnhold, ignorerer HTML-tagger, og setter ren tekst ved automatisk å escape alle tagger.

Verdi

Egenskapen value brukes med skjemafelt som <input>, <textarea> og <select>, og lar deg hente eller sette verdien brukeren har skrevet inn.

index.html

index.html

index.js

index.js

copy

value henter den nåværende verdien til skjemafelt og setter en ny verdi for input-, textarea- eller select-elementer.

Forskjeller mellom InnerHTML og TextContent

Praktisk eksempel: Oppdatering av en brukerprofil

Tenk deg en brukerprofilside der innledende data vises, og brukeren kan oppdatere profilinformasjonen sin via et skjema. Når brukeren sender inn skjemaet, oppdateres innholdet på siden dynamisk.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Opprinnelig vises profilen med et forhåndsdefinert brukernavn og bio, som kan endres via inndatafelter. Når knappen «Lagre endringer» trykkes, oppdaterer JavaScript den viste profilen: textContent oppdaterer brukernavnet som ren tekst, mens innerHTML oppdaterer bioen slik at enkel HTML-formatering tillates, og gjenspeiler eventuelle endringer brukeren gjør.

1. Hva gjør egenskapen innerHTML?

2. Når bør du bruke textContent i stedet for innerHTML?

3. Hva vil følgende kode skrive ut?

4. Hvilken egenskap brukes for å hente eller sette verdien til et <input>-element?

question mark

Hva gjør egenskapen innerHTML?

Select the correct answer

question mark

Når bør du bruke textContent i stedet for innerHTML?

Select the correct answer

question mark

Hva vil følgende kode skrive ut?

Select the correct answer

question mark

Hvilken egenskap brukes for å hente eller sette verdien til et <input>-element?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 6

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

Awesome!

Completion rate improved to 2.22

bookUtforsking av DOM-Egenskaper i JavaScript

Sveip for å vise menyen

JavaScript tilbyr flere egenskaper for å få tilgang til og manipulere innholdet. Forståelse av disse egenskapene gjør det mulig å oppdatere innholdet på nettsider dynamisk basert på brukerinteraksjoner eller andre betingelser.

InnerHTML

Egenskapen innerHTML gjør det mulig å hente eller sette HTML-innholdet til et element, inkludert tagger og tekst. Dette er en av de mest brukte egenskapene for dynamisk oppdatering av sideinnhold.

index.html

index.html

index.js

index.js

copy

innerHTML henter alt innhold, inkludert HTML-tagger, og gir mulighet for å sette inn eller oppdatere innhold med HTML-tagger.

TextContent

Egenskapen textContent henter eller setter tekstinnholdet til et element, og fjerner alle HTML-tagger. Ideell når det kun skal arbeides med ren tekst uten hensyn til HTML-strukturen.

index.html

index.html

index.js

index.js

copy

textContent henter kun tekstinnhold, ignorerer HTML-tagger, og setter ren tekst ved automatisk å escape alle tagger.

Verdi

Egenskapen value brukes med skjemafelt som <input>, <textarea> og <select>, og lar deg hente eller sette verdien brukeren har skrevet inn.

index.html

index.html

index.js

index.js

copy

value henter den nåværende verdien til skjemafelt og setter en ny verdi for input-, textarea- eller select-elementer.

Forskjeller mellom InnerHTML og TextContent

Praktisk eksempel: Oppdatering av en brukerprofil

Tenk deg en brukerprofilside der innledende data vises, og brukeren kan oppdatere profilinformasjonen sin via et skjema. Når brukeren sender inn skjemaet, oppdateres innholdet på siden dynamisk.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Opprinnelig vises profilen med et forhåndsdefinert brukernavn og bio, som kan endres via inndatafelter. Når knappen «Lagre endringer» trykkes, oppdaterer JavaScript den viste profilen: textContent oppdaterer brukernavnet som ren tekst, mens innerHTML oppdaterer bioen slik at enkel HTML-formatering tillates, og gjenspeiler eventuelle endringer brukeren gjør.

1. Hva gjør egenskapen innerHTML?

2. Når bør du bruke textContent i stedet for innerHTML?

3. Hva vil følgende kode skrive ut?

4. Hvilken egenskap brukes for å hente eller sette verdien til et <input>-element?

question mark

Hva gjør egenskapen innerHTML?

Select the correct answer

question mark

Når bør du bruke textContent i stedet for innerHTML?

Select the correct answer

question mark

Hva vil følgende kode skrive ut?

Select the correct answer

question mark

Hvilken egenskap brukes for å hente eller sette verdien til et <input>-element?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 6
some-alt