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.