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.