Inhoudsopgave
In het eerste deel van deze tutorial zagen we hoe de DOM is gestructureerd en hoe het werkt, hierin zullen we ermee blijven werken om de functionaliteiten uit te breiden en alle elementen van ons HTML-document te kunnen manipuleren.Werken met de DOM
Om toegang te krijgen tot het documentobject gebruiken we een globale documentvariabele; Deze variabele is een van de belangrijkste objecten die de browser voor ons maakt, omdat we via dit documentobject toegang hebben tot de documentinformatie als geheel en het geeft ons individuele toegang tot elk documentobject.
Laten we zoals altijd een voorbeeld bekijken waarmee we de theorie die we kennen kunnen verzoenen met de manier waarop deze in de werkelijkheid wordt toegepast.
VoorbeeldEr zijn veel verschillende soorten fruit - er zijn alleen al meer dan 500 soorten bananen. Tegen de tijd dat we de talloze soorten appels, sinaasappels en ander bekend fruit toevoegen, staan we voor duizenden keuzes.
Een van de meest interessante aspecten van fruit is de variëteit die in elk land beschikbaar is. Ik woon in de buurt van Londen, in een gebied dat bekend staat om zijn appels.
De code waarmee we de . gebruiken ZON Het is vrij kort en eenvoudig, maar het legt de verschillende toepassingen vast die we het kunnen geven, we gaan de code deel voor deel uitleggen om te zien hoe we de objecten hebben gebruikt.
Een van de meest elementaire acties die we kunnen gebruiken, is om de informatie te verkrijgen uit het HTML-document waarmee we werken, dus de eerste regel die we in onze code hebben geplaatst, doet precies dat en we kunnen het zien:
document.writeln ("
URL: "+ document.URL);
In dit geval lezen we de waarde van de eigenschap document.URL, die de URL van het huidige document retourneert, dat wil zeggen de URL die de browser heeft gebruikt om het document te laden waarin we de code hebben.
We zien ook hoe we de writeln-methode gebruiken:
document.writeln ("
URL: "+ document.URL);
Deze methode voegt eenvoudig inhoud toe aan het einde van ons HTML-document, in dit specifieke geval beginnen we met het toevoegen van een tag
en dan de eigenschap URL, hiermee hebben we de structuur en inhoud van de DOM al aangepast.
Het volgende dat we deden was alle elementen selecteren die de p tag in het document hebben, hiervoor gebruiken we de volgende regel:
var elems = document.getElementsByTagName ("p");
Hoe wij de methode zien getElementsByTagName Het is degene die ons doel dient, terwijl alles wat deze methode verzamelt, we toewijzen aan de variabele elementen.
In de volgende regel doen we een iteratie over de elems-variabele, waarbij we de toegewezen objecten verkrijgen, voor elke die we zullen herhalen, gaan we een regel tekst toevoegen met zijn id en later gaan we de attributen wijzigen om het uiterlijk te wijzigen .
for (var i = 0; i <elems.length; i ++) {document.writeln ("Element ID:" + elems [i] .id); elems [i] .style.border = "medium dubbel zwart"; elems [i] .style.padding = "4px"; }
Zoals we kunnen zien, voegen we een rand toe aan elk element dat we in onze variabele elementen hebben opgeslagen en daarnaast voegen we een opvulling toe.
Laten we na dit alles eindelijk eens kijken hoe dit er in de browser uitziet:
VERGROTEN
Vond je deze tutorial leuk en hielp je hem?Je kunt de auteur belonen door op deze knop te drukken om hem een positief punt te geven
