Arbeider med innholdet av elementer til kode med JavaScript-dummies

I JavaScript kan du vise nodetyper og nodeverdier ved hjelp av HTML DOM. Du kan også angi egenskapsverdier for elementer i DOM ved hjelp av elementobjektet. Når du bruker JavaScript for å angi egenskapene til DOM-elementene, reflekteres de nye verdiene i sanntid i HTML-dokumentet.

Endre egenskapene til elementene i et webdokument for å gjenspeile dem umiddelbart i nettleseren, uten at du trenger å oppdatere eller laste inn nettsiden, er en hjørnestein av det som tidligere ble kalt web 2. 0.

< ! --1 ->

innerHTML

Den viktigste egenskapen til et element som du kan endre gjennom DOM, er innerHTML-egenskapen.

Elementets indreHTML-egenskap inneholder alt mellom elementets begynnelse og sluttdel. For eksempel, i den følgende koden inneholder innerhTML-egenskapen til div-elementet et p-element og dets tekstnode barn:

Dette er litt tekst.

Det er svært vanlig i webprogrammering å lage tomme div-elementer i HTML-dokumentet ditt, og bruk deretter innerHTML-egenskapen til å dynamisk sette inn HTML i elementene.

For å hente og vise verdien av innerHTML-egenskapen, kan du bruke følgende kode:

var fåTheInner = dokument. kropp. første barn. innerhtml; dokument. skriv (getTheInner);

I den forrige koden, verdien som vil bli sendt ut av dokumentet. write () metoden er

Dette er litt tekst.

Innstilling av innerHTML-egenskapen gjøres på samme måte som du angir egenskapen til et objekt:

dokument. kropp. første barn. innerHTML = "Hei! “;

Resultatet av å kjøre det forrige JavaScript vil være at p-elementet og setningen i teksten i den opprinnelige oppslaget blir erstattet med ordene "Hei! "Det originale HTML-dokumentet forblir uendret, men DOM-representasjonen og gjengivelsen av nettsiden vil bli oppdatert for å gjenspeile den nye verdien. Fordi DOM-representasjonen av HTML-dokumentet er hva nettleseren viser, vil også visning av nettsiden din bli oppdatert.

Angi attributter

For å angi verdien av et HTML-attributt, kan du bruke metoden setAttribute ():

dokument. kropp. første barn. innerhtml. setAttribute ("class", "myclass");

Resultatet av å kjøre denne setningen er at det første barnelementet i kroppselementet vil bli gitt en ny attributt som heter "klasse" med en verdi av "myclass".