"The DOM" is een term die veel wordt gebruikt in front-end webdesign en -ontwikkeling. Het staat voor "Document Object Model", en het is een fundamenteel onderdeel van websites.
Hoe belangrijk de DOM ook is, veel mensen begrijpen het niet. U kunt zelfs jarenlang websites programmeren zonder er veel over te leren. Maar naarmate de front-end-technologie vordert, wordt het steeds belangrijker om de DOM te begrijpen.
Inzicht in het DOM-contract
Bij objectgeoriënteerd programmeren is er een constructie die een interface wordt genoemd. Een interface doet niets op zichzelf. In plaats daarvan creëert het een contract. Het zegt dat alles met iets anders kan communiceren, zolang het de regels van het interfacecontract volgt.
Met een interface kan elk deel van een programma op een gecontroleerde en voorspelbare manier communiceren met elk ander deel van het programma. De interface maakt het ook mogelijk dat een deel van een programma met een ander deel werkt, zelfs als het niets weet over het deel van het programma aan de andere kant van de interface.
Een interface is als een stopcontact in uw muur. Uw apparaat hoeft niet te weten waar de stroom vandaan komt, zolang de spanning maar correct is. De transformator op de hoek hoeft niet te weten wat hij voedt. Het hoeft alleen maar elektriciteit met het juiste voltage naar uw huis te sturen.
De DOM is een interfacelaag tussen de webpagina en de code die deze maakt en wijzigt. Wanneer u een website bezoekt, ziet u hoe de browser de DOM van die website weergeeft. Wanneer je HTML schrijft, programmeer je eigenlijk met behulp van de DOM's API (programmeerinterface).
De DOM-standaard wordt onderhouden door een organisatie genaamd het World Wide Web Consortiumof W3C. Ze hebben gemaakt zeer gedetailleerde documentatie die de DOM definieert standaard.
Op dit punt denk je misschien dat ze het niet erg goed doen. Er zijn tenslotte zoveel problemen die worden veroorzaakt door compatibiliteitsproblemen tussen browsers.
Het probleem ligt niet bij de standaard. Het is met de browsers zelf. Veel browsers hebben functionaliteit aan hun DOM-implementatie toegevoegd die niet voldoet aan de W3C-standaarden. Soms wordt die functionaliteit populair en wordt deze geïmplementeerd in de DOM-standaard, waardoor andere browsers gedwongen worden om in te halen.
Een ander probleem is dat sommige mensen nog steeds oudere versies van browsers gebruiken waarin niet de nieuwste DOM-standaard is ingebouwd. En soms implementeren browsers de standaard niet correct.
Hoe de DOM is gestructureerd
Je kunt de DOM zien als een boom. De element is de stam, en alle elementen erin zijn takken. Wanneer u HTML-elementen binnen een bovenliggend element nest, maakt u in feite vertakkingen buiten die vertakking. De juiste term voor elke tak is "knooppunt".
De boomstructuur creëert logische relaties tussen knooppunten, zoals een stamboom. Elk knooppunt kan een ouder en voorouders hebben van waaruit het zich vertakt. Ze kunnen broers en zussen hebben. En de knooppunten kunnen kinderen en nakomelingen krijgen. Het denken in deze termen helpt veel bij het gebruik van JavaScript en CSS om te communiceren met de DOM.
Hoe HTML samenwerkt met de DOM
De DOM wordt gedefinieerd door een documentobject te maken met de documentinterface. Uw HTML-code is de meest directe manier om een document te maken. HTML biedt u een eenvoudige manier om het document te definiëren zonder dat u traditioneel hoeft te programmeren.
Als u net begint met HTML, hier zijn vijf tips om er vertrouwd mee te raken.
HTML is de ruggengraat van elke webpagina. Als u een beginner bent, laten we u dan door de basisstappen leiden om HTML te begrijpen.
HTML is eenvoudiger en vergevingsgezinder dan traditionele programmeertalen. Het maakt interactie met de DOM gemakkelijk voor beginnende webontwerpers.
Hoe CSS samenwerkt met de DOM
Zodra uw HTML het DOM-document heeft gestructureerd, kan CSS dat document opmaken. Om dat te kunnen doen, moet het de elementen kunnen vinden die je wilt stylen. Het doet dit op een paar manieren.
U kunt toegang krijgen tot documentknooppunten door naar elementen te verwijzen op naam, zoals en. CSS heeft ook rechtstreeks toegang tot de elementen door te verwijzen klasse en ID kaart namen. Klassestyling wordt toegepast op verschillende elementen, zodat u ze allemaal tegelijkertijd kunt stylen. Omgekeerd past id-stijl wijzigingen toe op slechts één element.
U kunt ook toegang krijgen tot de stamboomstructuur met CSS en de toegang verfijnen voor meer controle. Met CSS-selectors kun je meerdere elementen kiezen en krijg je een hoop trucs om ze te vinden. U kunt naar kinderen zoeken op basis van hun afkomst, combinaties van klassen en nog veel meer.
Hoe JavaScript samenwerkt met de DOM
JavaScript heeft de meeste controle over het document omdat JavaScript een echte programmeertaal is met objecten, stroomcontrole, variabelen, enz. De DOM biedt verschillende interfaces waarmee JavaScript het document, de elementen en andere knooppunten kan manipuleren.
Verwant: Wat is JavaScript?
JavaScript kan knooppunten toevoegen en verwijderen en ook hun stijl wijzigen. En JavaScript kan gebeurtenissen in het document bekijken, zoals met de muis over een element bewegen, klikken en op toetsen drukken.
JavaScript kan op dezelfde manier als CSS door de documentstructuur zoeken en navigeren. Het is in staat om elementen te vinden op id en klasse. En het kan lijsten met onderliggende elementen ophalen als arrays.
De toekomst van webontwikkeling en de DOM
Het internet is sinds het begin enorm veranderd. In het begin werd JavaScript vooral gebruikt voor speciale effecten en eenvoudige gegevensweergave. De meeste websites waren niet veel meer dan digitale brochures. AJAX heeft dat allemaal veranderd.
Met AJAX kunnen websites gegevens bijwerken die worden weergegeven vanaf een server zonder de pagina opnieuw te laden. Vóór AJAX was elke wijziging in gegevens alleen zichtbaar wanneer de pagina opnieuw werd geladen of de gebruiker naar een andere pagina navigeerde.
Na AJAX werden webapps steeds populairder. Het internet is niet langer een verzameling eenvoudige statische websites en een paar hoogwaardige apps, zoals eBay. Nu is internet bijna een tweede besturingssysteem, vol met zeer functionele apps.
Naarmate de verwachtingen van gebruikers toenemen, moet technologie gelijke tred houden. JavaScript is niet de krachtigste of snelste taal. Het lijdt ook aan een handvol problemen, zoals fouten met drijvende-kommagetallen, waardoor het minder wenselijk is voor ontwikkelaars. Dit is waar WebAssembly binnenkomt.
WebAssembly brengt veel van de voordelen van native code naar de browser, waaronder verbeterde snelheid en betere hardwaretoegang. Hiermee kunnen programmeurs andere talen gebruiken om websites zoals C ++ en Rust te bouwen.
Maar zelfs met de enorme verbeteringen die WebAssembly zal brengen, zal de DOM er nog steeds zijn en een consistente interface bieden tussen de code en wat wordt weergegeven in de browser.
Verminder vermoeidheid van de ogen en verleng de levensduur van de batterij door Microsoft Outlook in de donkere modus te zetten.
- Programmeren
- HTML
- CSS
- Document Object Model
Lee is een fulltime nomade en een polymath met veel passies en interesses. Sommige van die passies draaien om productiviteit, persoonlijke ontwikkeling en schrijven.
Abonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve aanbiedingen!
Nog een stap…!
Bevestig uw e-mailadres in de e-mail die we u zojuist hebben gestuurd.
