HTML5 - DOM deel 1

De ZON die verwijst naar DocumentobjectmodelHet is niets meer dan een objectrepresentatie van de elementen die in ons HTML-document staan, hierdoor kunnen we een diepere verbinding maken met Javascript en het bereikt zeer interessante effecten; Om op dat niveau te komen, moeten we echter eerst heel goed weten hoe we binnen de DOM moeten omgaan met de implementatie en het gebruik ervan.
De DOM begrijpen
Het concept van uitbreiden ZON We kunnen ook toevoegen dat het een verzameling objecten is die de HTML In het document zien we in de naam wat een model is en het trefwoord dat het vertegenwoordigt is een representatief model van het HTML-document.
De DOM is een belangrijk hulpmiddel bij WEB-ontwikkeling, omdat het ons een brug geeft tussen de structuur en de inhoud tussen onze HTML- en Javascript-documenten.
Het model waar we het over hebben, wordt gemaakt door de browser wanneer deze de HTML-code interpreteert, de basisstructuur van een DOM is op de volgende manier te zien in een diagram in de volgende afbeelding:

Zoals we kunnen zien, is het gebaseerd op een hiërarchische structuur, hiermee bereiken we dat we de paden van deze relaties kunnen gebruiken om informatie te verkrijgen of structurele wijzigingen aan te brengen via Javascript.
De DOM . testen
We gaan enkele eenvoudige tests op ons document uitvoeren, zodat we wennen aan hoe u ermee kunt werken. ZON, een van de eerste tests die we kunnen uitvoeren, is om te controleren of een functionaliteit beschikbaar is in het document, laten we eens kijken in de volgende code:

 Voorbeeld
Er 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. 

Hier hebben we iets eenvoudigs gedaan, eerst controleren we of de methode bestaat querySelectorAll, als het bestaat, dan wijzen we aan een variabele de inhoud van alle elementen toe img ze hebben de id paratekst, omdat we een controle uitvoeren voor het geval het mislukt, gebruiken we een andere manier om dezelfde gegevens te verkrijgen, in dit geval is het de getElementById en later getElementByTagNameUiteindelijk herhalen we eenvoudig met onze gedefinieerde variabele de inhoud ervan en veranderen we hun CSS-eigenschappen.
Misschien is hier het negatieve dat we kunnen zien dat als we veel verificaties hebben, onze code complex en onleesbaar kan worden, alles een kwestie is van compromissen tussen wat we willen bereiken en de manier om dit te bereiken, op deze manier kunnen we onze resultaten.
In het volgende deel van deze tutorial zullen we enkele meer geavanceerde voorbeelden bekijken van hoe je verder kunt werken met de DOM.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