Nwlapcug.com


JavaScript DOM Tutorial

JavaScript DOM Tutorial


Comprendere il DOM è la chiave all'utilizzo di JavaScript in modo efficace. Gli elementi di una pagina web che sono disponibili a funzioni JavaScript esistano sotto forma di una struttura ad albero. Il Document Object Model è il modello entro il quale il codice JavaScript è in grado di accedere agli elementi in una pagina HTML. Qualsiasi cosa tu stia usando JavaScript per, se è per il tuo sito di stile o programmazione funzioni per renderlo dinamico e interattivo, una suono comprensione di come funziona il DOM è un reale vantaggio.

Istruzioni

1

Creare una pagina HTML con la seguente struttura semplice:

< html >

< head >

< script type = "text/javascript" >

funzione testDOM()

{

var mydiv=document.getElementById("main");

mydiv.innerHTML="Ouch";

}

< / script >

< / head >

< corpo >

< div id = "main" >

Ciao

< / div >

< forma azione = "" >

< input type = "button" valore = "button" onclick="testDOM()" / >

< / form >

< / body >

< / html >

Passare alla pagina e premere il pulsante che è stato creato. La pagina Crea un modello all'interno del quale è possibile sperimentare con le funzioni di DOM.

2

Apportare modifiche per il codice JavaScript per vedere come i diversi DOM funzioni lavoro. L'oggetto del documento è uno degli strumenti chiave che è possibile utilizzare nel codice JavaScript. L'oggetto documento vi dà una maniglia sugli elementi del documento come esse esistono in HTML, come nella riga "Document. getElementById". Modificare la funzione di JavaScript nella tua pagina a questo:

funzione testDOM()

{

var mydiv=document.getElementsByTagName("div");

if(myDiv!=null)

{

il primo elemento della matrice poiché c'è un solo elemento div

myDiv [0]. InnerHtml = "Ouch";

}

}

Prova di nuovo. Il metodo "getElementById" dovrebbe avere restituito solo un singolo elemento di pagina, come ci dovrebbe essere solo un elemento con un ID specificato. Tuttavia, il metodo "getElementsByTagName" restituisce una matrice, anche quando c'è un solo elemento di quel tipo in una determinata pagina. È pertanto necessario accedere all'elemento all'interno della matrice, e se ci sono più elementi all'interno di esso è possibile scorrerle e trattare con loro a sua volta.

3

Utilizzare JavaScript per accedere all'oggetto Window. Il DOM consente di accedere più appena il contenuto di una pagina web. Può anche accedere alla finestra e browser Web stesso, nonché ascoltare per vari eventi utente. Modificare il codice JavaScript:

funzione testDOM()

{

Alert ("si utilizza:" + UserAgent);

}

Questo consente al codice di accedere quale browser che l'utente ha, che molti sviluppatori utilizzano per modificare le impostazioni di stile per soddisfare i modi in cui un sito visualizzato in browser diversi.

4

Utilizzare il DOM di JavaScript per modificare lo stile dei vostri elementi di pagina. Modificare la funzione JavaScript:

funzione testDOM()

{

var mydiv=document.getElementById("main");

myDiv.Style.Color="#FF0000";

}

È possibile controllare molti aspetti della pagina utilizzando JavaScript, tra cui gli elementi stessi e come vengono visualizzati. È la capacità che il DOM ti dà accesso alle diverse parti nella pagina; è quindi possibile utilizzare tale accesso per apportare le modifiche necessarie.

5

Per creare un nuovo elemento nel documento, utilizzare il modello DOM. Modificare il codice JavaScript nella tua sezione Head:

funzione testDOM()

{

var mydiv=document.getElementById("main");

var newpara=document.createElement("p");

newpara.innerHTML= "Io sono di nuovo!";

mydiv.appendChild(newpara);

}

Test della pagina premendo ripetutamente il pulsante. Prima con il DOM per accedere a un elemento di pagina (cioè, il Div "principale"), quindi aggiungere elementi di pagina aggiuntiva e dettare loro contenuto come il JavaScript codice viene eseguito.

Consigli & Avvertenze

  • Sperimentare con le varie funzioni DOM che JavaScript offre. Ci sono molti modi per migliorare l'interattività di un sito Web e JavaScript è un semplice ma efficace.
  • Non date per scontato che il codice JavaScript funzionerà universalmente fino al testing in diversi Web browser. Perché JavaScript viene eseguito dal browser, si a volte comporta in modo diverso nei vari browser, quindi assicuratevi di provarlo accuratamente.