Javascript DOM Tutorial

Javascript DOM Tutorial


Forstå DOM er nøkkelen til å bruke Javascript effektivt. Elementene i en web-side som er tilgjengelige for Javascript-funksjoner eksistere i form av en trestruktur. The Document Object Model er modellen innen hvilke Javascript-koden er i stand til å få tilgang til elementene i en HTML-side. Uansett hva du bruker Javascript for, enten det er for styling språk eller programmerings dine funksjoner for å gjøre det dynamiske og interaktive, en lyd forståelse av hvordan DOM fungerer er en stor fordel.

Bruksanvisning

1 Opprett en HTML-side med følgende enkle struktur:

<Html>

<Head>

<Script type = "text / javascript">

funksjon testDOM ()

{

Var mydiv = document.getElementById ( "main");

mydiv.innerHTML = "Au";

}

</ Script>

</ Head>

<Body>

<Div id = "main">

Hallo

</ Div>

<Form action = "">

<Input type = "button" value = "button" onclick = "testDOM ()" />

</ Form>

</ Body>

</ Html>

Bla til siden og trykk på knappen som ble opprettet. Den side skaper en mal innenfor som du kan eksperimentere med DOM funksjoner.

2 Gjør endringer i Javascript for å se hvordan ulike DOM funksjoner fungerer. The Document Object er et av de viktigste verktøyene du kan bruke i løpet av Javascript-kode. The Document Object gir deg et håndtak på dokumentelementer som de finnes i HTML, som i "document.getElementById" linje. Endre Javascript-funksjonen på din side til dette:

funksjon testDOM ()

{

Var mydiv = document.getElementsByTagName ( "div");

if (mydiv! = null)

{

// Det første elementet i matrisen siden det er bare en div element

mydiv [0] .innerHTML = "Au";

}

}

Test det igjen. Den "getElementById" metoden bør bare har returnert en enkelt side element, så det skal bare være ett element med en gitt ID. Imidlertid returnerer "getElementsByTagName" -metoden en matrise, selv når det bare er ett element av denne typen på en bestemt side. Du må derfor få tilgang til element i matrisen, og hvis det er flere elementer innenfor det du kan sløyfe gjennom dem og håndtere dem etter tur.

3 Bruk Javascript for å få tilgang til vinduet objektet. DOM gir deg tilgang til mer enn bare innholdet på en nettside. Du kan også få tilgang til vinduet og nettleser selv, samt lytte til ulike brukerhendelser. Endre Javascript-kode:

funksjon testDOM ()

{

alert ( "Du bruker:" + navigator.userAgent);

}

Dette gjør at koden for å få tilgang til hvilken nettleser brukeren har, som mange utviklere bruker til å endre innstillingene stil som passer de måter som et område vises i ulike nettlesere.

4 Bruk Javascript DOM å endre stilen på sideelementer. Endre Javascript-funksjonen:

funksjon testDOM ()

{

Var mydiv = document.getElementById ( "main");

mydiv.style.color = "# FF0000";

}

Du kan styre mange aspekter av siden ved hjelp av Javascript, inkludert elementene seg selv og hvordan de vises. Muligheten for at DOM gir deg tilgang til de ulike delene i siden; du deretter bruke denne adgang til å gjøre de endringene du trenger.

5 Bruk DOM for å opprette et nytt element i dokumentet. Endre Javascript-kode i head-delen:

funksjon testDOM ()

{

Var mydiv = document.getElementById ( "main");

Var newpara = document.createElement ( "p");

newpara.innerHTML = "Jeg er ny!";

mydiv.appendChild (newpara);

}

Test ved å trykke gjentatte ganger på knappen. Ved første gangs bruk av DOM å få tilgang til en side element (dvs. "main" Div), kan du deretter legge til flere sideelementer og diktere deres innhold som Javascript-kode utfører.

Hint

  • Eksperimenter med ulike DOM funksjoner som Javascript tilbyr. Det er mange måter å forbedre interaktivitet i en nettside og Javascript er en grei, men effektive.
  • Ikke anta Javascript-kode vil fungere universelt til du teste den i flere nettlesere. Fordi Javascript er behandlet av nettleseren, noen ganger oppfører seg på en annen måte i ulike nettlesere, så sørg for å teste den grundig.