HTML DOM (Documentobjectmodel) is een hiërarchische weergave van HTML-documenten. Het definieert de structuur en eigenschappen van elementen op een webpagina, waardoor JavaScript inhoud dynamisch kan openen, manipuleren en bijwerken, waardoor de interactiviteit en functionaliteit worden verbeterd.

Opmerking : Het wordt een logische structuur genoemd omdat DOM geen enkele relatie tussen objecten specificeert.

Inhoudsopgave

• Waarom is DOM vereist?
• Structuur van DOM
• Eigenschappen van DOM
• Methoden van documentobjectmodel
• Wat is DOM niet?
• Niveaus van DOM:

Wat is DOM?

DOM , of Documentobjectmodel , is een programmeerinterface die gestructureerde documenten vertegenwoordigt, zoals HTML En XML als een boom van objecten. Het definieert hoe u documentelementen kunt openen, manipuleren en wijzigen met behulp van scripttalen zoals JavaScript.

Dus eigenlijk is het Document Object Model een API dat HTML- of XML-documenten vertegenwoordigt en ermee communiceert.

bashen als het anders is

De DOM is een W3C (Wereldwijde web consortium) standaard en het definieert een standaard voor toegang tot documenten.

De W3C Dom-standaard is verdeeld in drie verschillende delen:

• Kern-DOM – standaardmodel voor alle documenttypen
• XML-DOM – standaardmodel voor XML-documenten
• HTML-DOM – standaardmodel voor HTML-documenten

HTML-DOM

HTML-DOM is een standaard objectmodel en programmeerinterface voor HTML-documenten. HTML-DOM is een manier om de webpagina weer te geven in een gestructureerde hiërarchische manier zodat het voor programmeurs en gebruikers gemakkelijker wordt om door het document te bladeren.

Met HTML DOM kunnen we eenvoudig tags, ID's, klassen, attributen of HTML-elementen openen en manipuleren met behulp van opdrachten of methoden die door het documentobject worden geleverd.

hoe csv-bestand in java te lezen

Met behulp van DOM JavaScript krijgen we toegang tot zowel HTML als CSS van de webpagina en kunnen we ook het gedrag van de HTML-elementen wijzigen.

Waarom is DOM vereist?

HTML is gewend structuur de webpagina's en Javascript wordt gebruikt om toe te voegen gedrag naar onze webpagina's. Wanneer een HTML-bestand in de browser wordt geladen, kan JavaScript het HTML-document niet rechtstreeks begrijpen. Het interpreteert en communiceert dus met het Document Object Model (DOM), dat door de browser wordt gemaakt op basis van het HTML-document.

DOM is in feite de weergave van hetzelfde HTML-document, maar in een boomachtige structuur die uit objecten bestaat. JavaScript kan de tags() in een HTML-document niet begrijpen, maar wel object h1 in DOM.

JavaScript interpreteert DOM gemakkelijk en gebruikt het als een brug om toegang te krijgen tot de elementen en deze te manipuleren. DOM Javascript biedt toegang tot elk van de objecten (h1, p, enz.) door verschillende functies te gebruiken.

Het Document Object Model (DOM) is om verschillende redenen essentieel bij webontwikkeling:

• Dynamische webpagina's: Hiermee kunt u dynamische webpagina's maken. Het stelt JavaScript in staat pagina-inhoud, structuur en stijl dynamisch te openen en te manipuleren, wat interactieve en responsieve webervaringen oplevert, zoals het bijwerken van inhoud zonder de hele pagina opnieuw te laden of onmiddellijk te reageren op gebruikersacties.
• Interactiviteit: Met de DOM kunt u reageren op gebruikersacties (zoals klikken, invoer of scrollen) en de webpagina dienovereenkomstig aanpassen.
• Inhoudsupdates: Wanneer u de inhoud wilt bijwerken zonder de hele pagina te vernieuwen, maakt de DOM gerichte wijzigingen mogelijk waardoor de webapplicaties efficiënter en gebruiksvriendelijker worden.
• Compatibiliteit tussen browsers: Verschillende browsers kunnen HTML en CSS op verschillende manieren weergeven. De DOM biedt een gestandaardiseerde manier om met pagina-elementen te communiceren.
• Single-Page-applicaties (SPA's): Applicaties die zijn gebouwd met raamwerken zoals React of Angular, zijn sterk afhankelijk van de DOM voor het efficiënt weergeven en bijwerken van inhoud binnen een enkele HTML-pagina zonder de volledige pagina opnieuw te laden.

Structuur van DOM

DOM kan worden gezien als een boom of bos (meer dan één boom). De voorwaarde structuurmodel wordt soms gebruikt om de boomachtige weergave van een document te beschrijven.

Elke tak van de boom eindigt in een knooppunt, en elk knooppunt bevat objecten. Gebeurtenislisteners kunnen aan knooppunten worden toegevoegd en worden geactiveerd wanneer een bepaalde gebeurtenis plaatsvindt. Een belangrijke eigenschap van DOM-structuurmodellen is structureel isomorfisme : als twee DOM-implementaties worden gebruikt om een ​​representatie van hetzelfde document te maken, zullen ze hetzelfde structuurmodel creëren, met precies dezelfde objecten en relaties.

Waarom wordt DOM een objectmodel genoemd?

Documenten worden gemodelleerd met behulp van objecten, en het model omvat niet alleen de structuur van een document, maar ook het gedrag van een document en de objecten waaruit het is samengesteld, zoals tag-elementen met attributen in HTML.

prime-programma in Java

Eigenschappen van DOM

Laten we eens kijken naar de eigenschappen van het documentobject die toegankelijk zijn en kunnen worden gewijzigd door het documentobject.

Vertegenwoordiging van de DOM

• Vensterobject : Vensterobject is een object van de browser dat altijd bovenaan de hiërarchie staat. Het is als een API die wordt gebruikt om alle eigenschappen en methoden van de browser in te stellen en er toegang toe te krijgen. Het wordt automatisch aangemaakt door de browser.
• Documentobject: Wanneer een HTML-document in een venster wordt geladen, wordt het een documentobject. Het object ‘document’ heeft verschillende eigenschappen die verwijzen naar andere objecten die toegang tot en wijziging van de inhoud van de webpagina mogelijk maken. Als er toegang nodig is tot een element op een HTML-pagina, beginnen we altijd met toegang tot het ‘document’-object. Documentobject is eigendom van vensterobject.
• Formulierobject: Het wordt vertegenwoordigd door formulier labels.
• Object koppelen : Het wordt vertegenwoordigd door koppeling labels.
• Ankerobject : Het wordt vertegenwoordigd door een href labels.
• Formulierbesturingselementen: Formulier kan veel besturingselementen bevatten, zoals tekstvelden, knoppen, keuzerondjes, selectievakjes, enz.

Methoden van documentobject

DOM biedt verschillende methoden waarmee gebruikers kunnen communiceren met het document en het kunnen manipuleren. Enkele veelgebruikte DOM-methoden zijn:

Voorbeeld: In dit voorbeeld gebruiken we de HTML-element-ID om het DOM HTML-element te vinden.

    
techcodeview.comh2>
Een informaticaportaal voor nerds. p>
Dit voorbeeld illustreert de getElementByIdb>-methode. p>
p>