Hvordan få tilgang til alle Input elementer inne i en Div

The Document Object Model, eller DOM, er en måte å representere en webside i form av dens HTML-elementer og deres nestede relasjoner. Elements nestet i et annet element er å anse som "barn" av at "foreldre" element. Javascript gir deg kontroll over innholdet på websiden via DOM. Bruk "getElementById" og "getElementsByTagName" metoder for å få tilgang til bestemte elementer og grupper av elementer av type i siden din. Kombiner de to for å få rask tilgang til alle "input" elementer inne i en div.

Bruksanvisning

1 Tildele en "id" attributtverdien til div som inneholder "input" elementer du vil ha tilgang til. For eksempel:

<Div id = "div1">

<Input type = "button" />

<Input type = "text" />

</ Div>

Verdien av "id" attributtet skal være unik for den aktuelle div.

2 Plasser følgende Javascript-kode mellom "hodet" kodene i HTML-dokumentet:

<Script type = "text / javascript">

funksjons changeInputs (ObjRef) {

divobj = document.getElementById (ObjRef);

inputobjs = divobj.getElementsByTagName ( "input");

for (i i inputobjs) {

inputobjs [i] .Value = "nyVerdi";

}

}

</ Script>

Legg merke til hvordan de "getElementById" og "getElementsByTagName" metoder brukes for å navigere i DOM-treet. Den "id" av div er gått inn som et argument. En henvisning til div er opprettet og lagret i variabelen "divobj." Da "getElementsByTagName" metode for dette objektet brukes til å hente en matrise som inneholder referanser til "input" objekter inne i div. At matrisen er lagret i "inputobjs," og en "av" loop brukes til å utføre kode på hver av dem.

3 Plasser en knapp i kroppen på siden for å teste driften av "changeInputs," slik:

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

4 Lagre siden og legg den i en nettleser. Klikk på "changeInputs" knappen og observere resultatet. Knapper og tekst innganger inne i div er begge berørt, siden de begge har en "verdi" attributt. Endre "changeInputs" for å kjøre hva Javascript-kode du vil for hvert element i en div.