HTML5 - DOM del 2

Indholdsfortegnelse
I den første del af denne vejledning så vi, hvordan DOM'en er opbygget, og hvordan det fungerer. I dette vil vi fortsætte med at arbejde med det for at udvide dets funktionaliteter og være i stand til at manipulere alle elementerne i vores HTML -dokument.
Arbejder med DOM
For at få adgang til dokumentobjektet bruger vi en global dokumentvariabel; Denne variabel er et af de centrale objekter, som browseren skaber for os, da det er gennem dette dokumentobjekt, vi kan få adgang til dokumentoplysningerne som helhed, og det giver os individuel adgang til hvert dokumentobjekt.
Lad os som altid se et eksempel, som vi kan forene den teori, vi kender, med den måde, den anvendes i virkeligheden.
 Eksempel

Der er masser af forskellige slags frugt - der er over 500 sorter bananer alene. Når vi tilføjer de utallige typer æbler, appelsiner og andre velkendte frugter, står vi over for tusindvis af valgmuligheder.

Et af de mest interessante aspekter af frugt er sorten i hvert land. Jeg bor i nærheden af ​​London, i et område, der er kendt for sine æbler.


Koden, som vi bruger SOL Det er ret kort og enkelt, men det fanger de forskellige anvendelser, vi kan give det, vi skal forklare koden del for del for at se, hvordan vi har brugt objekterne.
En af de mest grundlæggende handlinger, vi kan bruge, er at hente oplysningerne fra HTML -dokumentet, som vi arbejder med, så den første linje, vi har placeret i vores kode, gør netop det, og vi kan se det:
document.writeln ("
URL: "+ document.URL);

I dette tilfælde læser vi ejendommens værdi document.URL, som returnerer URL'en til det aktuelle dokument, det vil sige URL'en, som browseren brugte til at indlæse det dokument, som vi har koden i.
Vi ser også, hvordan vi bruger Writeln -metoden:
document.writeln ("
URL: "+ document.URL);

Denne metode tilføjer simpelthen indhold til slutningen af ​​vores HTML -dokument, i dette særlige tilfælde starter vi med at tilføje et tag
og derefter URL -ejendommen, med dette har vi allerede ændret strukturen og indholdet af DOM.
Nu var den næste ting, vi gjorde, at vælge alle de elementer, der har p -mærket i dokumentet, til dette bruger vi følgende linje:
var elems = document.getElementsByTagName ("p");

Hvordan ser vi metoden getElementsByTagName Det er den, der tjener vores formål, samtidig tildeler vi alt, hvad denne metode indsamler, til variablerne.
I den næste linje foretager vi en iteration over elemsvariablen, hvor vi får de tildelte objekter, for hver enkelt, som vi vil gentage, vil vi tilføje en tekstlinje med dens id, og senere vil vi ændre dens attributter for at ændre dens udseende .
 for (var i = 0; i <elems.length; i ++) {document.writeln ("Element ID:" +elems [i] .id); elems [i] .style.border = "medium dobbelt sort"; elems [i] .style.padding = "4px"; } 

Som vi kan se, tilføjer vi en kant til hvert element, som vi har gemt i vores variable elemer, og derudover tilføjer vi en polstring.
Efter alt dette, lad os endelig se, hvordan alt dette ser ud i browseren:

FORSTØRRE

Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt
wave wave wave wave wave