Innholdsfortegnelse
I den første delen av denne opplæringen så vi hvordan DOM er strukturert og hvordan det fungerer. I dette vil vi fortsette å jobbe med det for å utvide funksjonalitetene og kunne manipulere alle elementene i HTML -dokumentet vårt.Jobber med DOM
For å få tilgang til dokumentobjektet bruker vi en global dokumentvariabel; Denne variabelen er et av nøkkelobjektene som nettleseren lager for oss, siden det er gjennom dette dokumentobjektet vi kan få tilgang til dokumentinformasjonen som helhet, og den gir oss individuell tilgang til hvert dokumentobjekt.
Som alltid, la oss se et eksempel som vi kan forene teorien vi kjenner med måten den brukes på i virkeligheten.
EksempelDet er mange forskjellige frukttyper - det er over 500 varianter av bananer alene. Når vi legger til de utallige typer epler, appelsiner og annen kjent frukt, står vi overfor tusenvis av valg.
En av de mest interessante aspektene ved frukt er variasjonen som er tilgjengelig i hvert land. Jeg bor i nærheten av London, i et område som er kjent for sine epler.
Koden som vi bruker SOL Det er ganske kort og enkelt, men det fanger opp de forskjellige bruksområdene vi kan gi det, vi skal forklare koden del for del for å se hvordan vi har brukt objektene.
En av de mest grunnleggende handlingene vi kan bruke er å hente informasjonen fra HTML -dokumentet vi jobber med, så den første linjen vi har plassert i koden vår gjør nettopp det, og vi kan se den:
document.writeln ("
URL: "+ document.URL);
I dette tilfellet leser vi verdien av eiendommen document.URL, som returnerer URL -en til det gjeldende dokumentet, det vil si URL -en som nettleseren brukte til å laste dokumentet der vi har koden.
Vi ser også hvordan vi bruker Writeln -metoden:
document.writeln ("
URL: "+ document.URL);
Denne metoden legger ganske enkelt til innhold på slutten av HTML -dokumentet vårt, i dette spesielle tilfellet starter vi med å legge til en tag
og deretter URL -egenskapen, med dette har vi allerede endret strukturen og innholdet i DOM.
Det neste vi gjorde var å velge alle elementene som har p -taggen i dokumentet, for dette bruker vi følgende linje:
var elems = document.getElementsByTagName ("p");
Hvordan vi ser metoden getElementsByTagName Det er den som tjener vår hensikt, samtidig tildeler vi alt som denne metoden samler til variabelen elems.
På neste linje gjør vi en iterasjon over elemsvariabelen, og får de tildelte objektene. For hver en som vi skal gjenta, kommer vi til å legge til en tekstlinje med dens ID, og senere skal vi endre attributtene for å endre utseendet .
for (var i = 0; i <elems.length; i ++) {document.writeln ("Element ID:" +elems [i] .id); elems [i] .style.border = "middels dobbel svart"; elems [i] .style.padding = "4px"; }
Som vi kan se, legger vi til en ramme til hvert element som vi har lagret i våre variable elemer, og i tillegg legger vi til en polstring.
Etter alt dette, la oss endelig se hvordan alt dette ser ut i nettleseren:
FORSTØRRE
Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng 
