Il Document Object Model, o DOM, è un modo di rappresentare una pagina Web in termini di elementi HTML e le loro relazioni nidificate. Elementi annidati all'interno di un altro elemento sono considerati come "figli" di quell'elemento "genitore". JavaScript vi permette di controllare il contenuto della pagina Web tramite il DOM. Utilizzare i metodi "getElementById" "GetElementsByTagName" per accedere agli elementi specifici e gruppi di elementi per tipo nella tua pagina. Combinare i due per accedere rapidamente tutti gli elementi di "input" all'interno di un div.

istruzione

1 Assegnare un "id" valore di attributo al div che contiene gli elementi di "input" si desidera accedere. Per esempio:

<Div id = "div1">

<Input type = "button" />

<Input type = "text" />

</ Div>

Il valore dell'attributo "id" deve essere univoco a quel particolare div.

2 Inserire il seguente codice JavaScript tra i tag "testa" del documento HTML:

<Script type = "text / javascript">

changeInputs funzione (OBJREF) {

divobj = document.getElementById (OBJREF);

inputobjs = divobj.getElementsByTagName ( "input");

for (i in inputobjs) {

inputobjs [i] .value = "newValue";

}

}

</ Script>

Si noti come i metodi "e" getElementById "GetElementsByTagName" vengono utilizzati per navigare l'albero DOM. L ' "id" del div viene passato come argomento. viene stabilito un riferimento al div e memorizzato nella variabile "divobj." Quindi il metodo "getElementsByTagName" di tale oggetto viene utilizzato per recuperare una matrice contenente riferimenti agli oggetti di "input" all'interno del div. Tale matrice è memorizzato in "inputobjs," e "a" loop è usato per eseguire codice su ciascuno di essi.

3 Posizionare un pulsante nel corpo della pagina per verificare il funzionamento di "changeInputs," in questo modo:

<input type = "button" value = "changeInputs" onclick = "changeInputs ( 'div1');" />

4 Salvare la pagina e caricare in un browser Web. Fare clic sul pulsante "changeInputs" e osservare il risultato. Pulsanti e input di testo all'interno del div sono entrambi colpiti, in quanto entrambi hanno un attributo di "valore". Change "changeInputs" per eseguire qualsiasi codice JavaScript che ti piace per ogni elemento in un div.