April 13
Capire il DOM è la chiave per utilizzare in modo efficace JavaScript. esistono Gli elementi di una pagina web che sono disponibili per funzioni JavaScript nella 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. Qualunque cosa si sta utilizzando JavaScript per, se è per lo styling le funzioni del sito o di programmazione per rendere più dinamico e interattivo, una solida conoscenza di come funziona il DOM è un vero e proprio vantaggio.
1 Creare una pagina HTML con la seguente struttura semplice:
<Html>
<Head>
<Script type = "text / javascript">
Funzione testdom ()
{
var mydiv = document.getElementById ( "principale");
mydiv.innerHTML = "Ouch";
}
</ Script>
</ Head>
<Body>
<Div id = "principale">
Ciao
</ Div>
<Form action = "">
<Input type = valore "pulsante" = "button" onclick = "testdom ()" />
</ Form>
</ Body>
</ Html>
Individuare la pagina e premere il pulsante che è stato creato. La pagina di crea un modello all'interno del quale si può sperimentare con le funzioni DOM.
2 Apportare modifiche al JavaScript per vedere come i diversi funzionano funzioni DOM. Il Document Object è uno degli strumenti chiave che è possibile utilizzare nel codice JavaScript. Il Document Object ti dà una maniglia su gli elementi del documento come esistono in HTML, come nella linea "document.getElementById". Modificare la funzione JavaScript nella tua pagina a questo:
Funzione testdom ()
{
var mydiv = document.getElementsByTagName ( "div");
if (myDiv! = null)
{
// Il primo elemento della matrice poiché c'è solo un elemento di div
mydiv [0] = .innerHTML "Ouch";
}
}
Prova di nuovo. Il metodo "getElementById" dovrebbe aver restituito un solo elemento della pagina, come ci dovrebbe essere solo un elemento con un determinato ID. Tuttavia, il metodo "getElementsByTagName" restituisce una matrice, anche quando vi è solo un elemento di quel tipo in una determinata pagina. È pertanto necessario accedere all'elemento all'interno della matrice, e se ci sono più elementi al suo interno è possibile scorrere di loro e trattare con loro a turno.
3 Utilizzare JavaScript per accedere all'oggetto Window. Il DOM consente di accedere ai più che i contenuti di una pagina web. È anche possibile accedere alla finestra e web browser stesso, così come ascoltare per vari eventi di utente. Modificare il codice JavaScript:
Funzione testdom ()
{
alert ( "Si sta utilizzando:" + navigator.userAgent);
}
In questo modo il codice per accedere a ciò che il browser che l'utente ha, che molti sviluppatori utilizzano per modificare le impostazioni di stile per soddisfare i modi in cui un sito appare in diversi browser.
4 Utilizzare il DOM JavaScript per modificare lo stile dei vostri elementi della pagina. Modificare la funzione JavaScript:
Funzione testdom ()
{
var mydiv = document.getElementById ( "principale");
mydiv.style.color = "# ff0000";
}
È possibile controllare molti aspetti della pagina utilizzando JavaScript, inclusi gli elementi stessi e il modo in cui vengono visualizzati. La possibilità che il DOM consente l'accesso alle diverse parti della pagina; quindi si utilizza l'accesso per apportare le modifiche necessarie.
5 Utilizzare il DOM per creare un nuovo elemento nel documento. Modificare il codice JavaScript nella sezione dell'azienda:
Funzione testdom ()
{
var mydiv = document.getElementById ( "principale");
var newpara = document.createElement ( "p");
newpara.innerHTML = "Sono nuovo!";
mydiv.appendChild (newpara);
}
Testare la pagina premendo ripetutamente il tasto. Con prima utilizzando il DOM per accedere a un elemento della pagina (ad esempio, il "principale" Div), è quindi possibile aggiungere ulteriori elementi della pagina e dettare il loro contenuto, come il codice JavaScript viene eseguito.