January 7
HTML DOM è un acronimo che significa HyperText Markup Language Document Object Model. Questo descrive la gerarchia dell'oggetto documento HTML e tutti gli oggetti e metodi all'interno di esso. L'utilizzo di questo concetto all'interno di un linguaggio di scripting, come JavaScript, crea Dynamic HTML o DHTML. DHTML è quando si usa JavaScript per alterare gli elementi all'interno del DOM HTML.
1 Scrivi alcune HTML con un elemento identificato dal suo attributo id per l'accesso DOM tardi.
<Html>
<Head>
<Title> HTML DOM Tutorial </ title>
</ Head>
<Body>
<Div id = "myDiv"> contenuto del div </ div>
al di fuori di div
</ Body>
</ Html>
Si utilizzerà il DOM HTML per accedere all'elemento <div> che abbiamo appena creato.
2 Inserire JavaScript nella <head> del documento HTML. Questo punterà la variabile "MyElement" al primo elemento HTML con l'attributo "id" impostato su "myDiv", e dovrebbe funzionare in quasi tutti i browser web.
<Script type = "text / javascript">
MyElement = document.getElementById ( "myDiv");
</ Script>
Per recuperare una serie di elementi HTML, è possibile invece utilizzare il metodo getElementsByTagName o getElementsByClassName meno sostenuto. Fare riferimento alla sezione Risorse per ulteriori approfondimenti su questi metodi.
3 Manipolare attributi dell'elemento HTML per rendere DHTML.
myElement.innerHTML = "nuovi contenuti del div";
myElement.style.backgroundColor = "red";
Queste due linee di JavaScript cambieranno i contenuti del myDiv al nuovo testo, e quindi modificare il colore di sfondo myDiv al rosso.