HTML Dom Tutorial

HTML Dom Tutorial


HTML DOM er et akronym som betyr Hypertext Markup Language Document Object Model. Dette beskriver hierarkiet av HTML-dokument objekt og alle objektene og metoder i den. Ved hjelp av dette konseptet i et skriptspråk, som Javascript, skaper dynamisk HTML, eller DHTML. DHTML er når Javascript brukes til å endre elementer i HTML DOM.

Bruksanvisning

1 Skriv noen HTML med et element identifisert av sin id attributt for DOM tilgang senere.

<Html>

<Head>

<Title> HTML DOM Tutorial </ title>

</ Head>

<Body>

<Div id = "myDiv"> Innholdet i div </ div>

utenfor div

</ Body>

</ Html>

Du vil bruke HTML DOM å få tilgang til <div> element vi nettopp opprettet.

2 Sett Javascript inn i <head> element i HTML-dokumentet. Denne vil peke variabelen "myElement" til den første HTML-elementet med "id" attributt satt til "myDiv", og skal fungere i nesten alle nettleser.

<Script type = "text / javascript">

myElement = document.getElementById ( "myDiv");

</ Script>

Hvis du vil hente en rekke HTML-elementer, kan du i stedet bruke mindre støttet metoder getElementsByTagName eller getElementsByClassName. Se i Resources for videre lesing på disse metodene.

3 Manipulere attributtene til HTML-elementet for å gjøre DHTML.

myElement.innerHTML = "nye innholdet i div";

myElement.style.backgroundColor = "red";

Disse to linjer med Javascript vil endre innholdet i myDiv til den nye teksten, og deretter endre bakgrunnsfargen myDiv til rødt.

Hint

  • Dette er fremgangsmåten for implementering av HTML DOM i Javascript. For en full referanse av HTML DOM objekter og metoder, bruk lenkene i Referanser og ressurser seksjoner.