Il Document Object Model, o DOM, è un modo di rappresentare una pagina Web in termini di suoi elementi HTML e loro relazioni nidificate. Elementi nidificati all'interno di un altro elemento sono considerati come "figli" dell'elemento "padre". JavaScript dà hai controllo sul contenuto delle pagine Web tramite l'utilizzo di Dom. "getElementById" e "getElementsByTagName" metodi per accedere a specifici elementi e gruppi di elementi di tipo nella tua pagina. Combinare i due per accedere rapidamente a tutti gli elementi di "input" all'interno di un div.

Istruzioni

1

Assegnare un valore di attributo "id" 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 per quel particolare div.

2

Inserire il codice JavaScript seguente tra i tag di "head" del documento HTML:

< script type = "text/javascript" >

Function changeInputs(objref) () {

DivObj = document.getElementById(objref);

inputobjs = divobj.getElementsByTagName("input");

per (i in inputobjs) {

inputobjs [i]. Value = "newValue";

}

}

< / script >

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

3

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

< input type = "button" valore = "changeInputs" onClick="changeInputs('div1');" / >

4

Salvare la pagina e caricarlo in un browser Web. Fare clic sul pulsante "changeInputs" e osservare il risultato. Pulsanti e ingressi di testo all'interno del div sono entrambi interessati, poiché entrambi hanno un attributo "value". Modificare "changeInputs" per eseguire qualsiasi codice JavaScript che ti piace per ogni elemento in un div.