In het volgende voorbeeld worden alle onderliggende elementen van document.body doorlopen.

For(var i=0; i LICHAAM

Deze eigenschap bepaalt de stijl. Dit is vergelijkbaar met het instellen van een stijl in CSS.

U kunt bijvoorbeeld element.style.width instellen:

Broncode voor deze knop:

Er is een algemene vervangingsregel: als een CSS-attribuut koppeltekens bevat, moet u deze vervangen door hoofdletters om de stijl in te stellen.

Als u bijvoorbeeld de eigenschap z-index op 1000 wilt instellen, moet u het volgende instellen:

Element.style.zIndex = 1000

Ooit werd deze eigenschap alleen ondersteund in IE. Nu ondersteunen alle moderne browsers het.

Het bevat alle HTML-code binnen het knooppunt en kan worden gewijzigd.

De eigenschap innerHTML wordt voornamelijk gebruikt om de inhoud van een pagina dynamisch te wijzigen, bijvoorbeeld:

Document.getElementById("voettekst").innerHTML = "Doei!"

Misschien is innerHTML een van de meest gebruikte DOM-elementeigenschappen.

Deze eigenschap specificeert de klasse van het element. Het is volledig vergelijkbaar met het html-attribuut "class".

Elem.className = "nieuwe klasse"

En andere eigenschappen die beginnen met "on..." slaan handlerfuncties op voor de overeenkomstige gebeurtenissen. U kunt bijvoorbeeld een onclick-gebeurtenishandler toewijzen.

Zie voor meer informatie over deze eigenschappen en gebeurtenishandlers

Het onderwerp is echt ingewikkeld. Maar zoals ze zeggen, de duivel is niet zo verschrikkelijk als hij wordt geschilderd. Dit is waar ik de moeilijkste noot krijg: deze supertaak om het zo verteerbaar mogelijk te ‘schilderen’, maar niet helemaal primitief. Tot nu toe zijn al de materialen die ik heb gelezen vaak diepzinnig of primitief.

De afkorting DOM staat voor Documentobjectmodel(documentobjectmodel).

DOM is een programmeerinterface voor toegang tot de inhoud van HTML-, XHTML- en XML-documenten, dat wil zeggen die HTML-, XHTML- en XML-tags en -attributen vertegenwoordigen, evenals CSS-stijlen als programmeerobjecten. Zowel JavaScript als andere webprogrammeertalen werken met dit model.

Een beetje geschiedenis

Er zijn 4 DOM-niveaus (0, 1, 2 en 3).

Level 0 (1996) omvatte DOM-modellen die vóór Level 1 bestonden. Dit zijn voornamelijk collecties: document.images, document.forms, document.layers en document.all. Deze modellen zijn niet formeel DOM-specificaties gepubliceerd door het W3C. In plaats daarvan vertegenwoordigen ze informatie over wat er bestond voordat het standaardisatieproces begon.

Level 1 (1997) omvatte ook basisfunctionaliteit voor het verwerken van XML-documenten: talloze manieren om met individuele knooppunten te werken, werken met XML-verwerkingsinstructies, enz.

Daarnaast bevat DOM-niveau 1 een aantal speciale interfaces die overweg kunnen met individuele HTML-elementen. Zo kun je bijvoorbeeld werken met HTML-tabellen, formulieren, keuzelijsten etc.

DOM Level 2 (2002) heeft verschillende nieuwe functies toegevoegd.

Terwijl DOM Level 1 geen ondersteuning bood voor naamruimten, bevatten DOM Level 2-interfaces methoden voor het beheren van naamruimten die verband houden met de vereisten voor het samenstellen en verwerken van XML-documenten.

Bovendien ondersteunt DOM niveau 2 evenementen.

Niveau 2 is het huidige niveau van de DOM-specificatie, maar het W3C beveelt enkele secties van de Niveau 3-specificatie aan.

DOM Level 3 is een werkversie van de specificatie die de functionaliteit van DOM Level 2 uitbreidt. Een van de belangrijkste kenmerken van deze versie van de specificatie is de mogelijkheid om met talloze DOM-extensies te werken.

Wat betekent "software-interface"?

Het Engelse woord interface kan worden vertaald als ‘contactgebied’. Een computer begrijpt grofweg maar twee dingen: een leeg bit en een gevuld bit. De taal die een computer ‘spreekt’ kan worden gezien als een eindeloze reeks nullen en enen, die een oneindig aantal verschillende combinaties oplevert.

Elke programmacode is een voor de programmeur begrijpelijke interpretatie van deze ‘nullen en enen’ waarmee de computer werkt. Elke programmeertaal is dus een mens-machine-interface.

Browsers werken net als andere computertoepassingen. Ze interpreteren HTML-, XML-, CSS-, JavaScript-, PHP-, Perl-, enz.-codes in ‘nullen en enen’. Om deze meertaligheid aan te pakken is een gemeenschappelijk platform nodig. Dit platform is de DOM - een specificatie die niet afhankelijk is van een specifieke programmeertaal of markup. Het is een interface die kan worden gebruikt in veel populaire programmeertalen die verband houden met het maken van webpagina's en die DOM-objecten kan begrijpen en interpreteren.

DOM en browsers

DOM en JavaScript

In JavaScript is de top van de hiërarchische ladder van DOM-objecten, een soort ‘geleider’ van deze interface, het documentobject, en DOM-objecten worden de eigenschappen ervan, de eigenschappen van de eigenschappen ervan, enz. Ze worden ook DOM-knooppunten genoemd.

Er zijn 12 soorten knooppunten in DOM-niveau 2. Aan elk DOM-knooppunttype wordt een constante met een unieke naam toegewezen. De meeste knooppunten zijn ontworpen om met XML te werken. In de HTML - JavaScript-assembly die we doen, kunnen slechts 5 typen worden gebruikt. Maar zelfs dit ‘topje van de ijsberg’ is een zeer ‘uitdijende boom’ die niet in één of twee lessen kan worden behandeld.

De volledige set knooppunttypeconstanten gedefinieerd in de W3C DOM-specificatie (knooppunten beschikbaar voor HTML - JavaScript zijn blauw gemarkeerd):

* Notaties zijn namen die het formaat van niet-geparseerde secties identificeren, het formaat van elementen die een notatie-attribuut hebben, of het toepassingsprogramma waarop de richtlijn betrekking heeft.

(Het is nog niet duidelijk? Ik ben er ook nog niet zo zeker van.)

Documentstructuur in de DOM

DOM-koptekst

Paragraaftekst

Hier is een diagram van de DOM-boom:

Elk knooppunt kan onderliggende knooppunten hebben (pijlen leiden ernaar in het diagram). Het documentobject – de basis van de documentboom – is ook een knooppunt, maar heeft geen ouderknooppunt en heeft een aantal eigenschappen en methoden die andere knooppunten niet hebben. Het heeft één kindknooppunt: element.

Een element heeft twee onderliggende knooppunten: en , waarvoor alle elementen daarin kinderen worden.

Aandacht!

DOM-koptekst

"Element" en "tag" zijn niet synoniem. Een tag is een opmaakmarkering: - dit zijn twee verschillende tags. En een element is een object dat is gemarkeerd met deze tags:

Elementen, en

Bevat tekst binnenin. Dit zijn hun onderliggende tekstknooppunten. Het element heeft ook een attribuut: align="center" . Attribuutknooppunten zijn ook onderliggende knooppunten van de elementen die ze bevatten.

Enkele eigenschappen van knooppunten

Kleine introductie

Ik herhaal nogmaals: wanneer we pagina-elementen in scripts benaderen, hebben we niet alleen te maken met de Javascript-taal, maar ook met de daarin ingebedde DOM-interface. Soms moet je je hiervan bewust zijn, soms kun je vergeten ‘dat we in proza ​​praten’.

We hebben op deze manier al enkele eigenschappen en methoden uit het DOM-objectmodel gebruikt. Daarom zal ik van tijd tot tijd links naar eerdere lessen geven.

In deze les gaan we niet de “academische” route volgen, waarbij we alle eigenschappen van alle knooppunten in alle browsers in ogenschouw nemen. Laten we eerst kennis maken met de meest praktische en “conflictvrije” daarvan.

Daarom beginnen we niet, zoals gebruikelijk, met de “hoofdeigenschappen”: nodeName en nodeValue.

tagNaam

Retourneert een tekenreeks die de naam van de tag van het element bevat. Alle tagName-waarden bevatten alleen hoofdletters.

Voorbeeld

.tagNaam

De eigenschap tagName testen document.write(document.getElementById("testTagNaam"

).tagNaam)

Resultaat

De eigenschap tagName testen

innerlijkeHTML

Geeft toegang tot de inhoud van het element. Specificeert niet alleen de tekstinhoud, maar ook alle HTML-tags die zich in het element bevinden.

Deze eigenschap is niet alleen bedoeld om te lezen, maar ook om de inhoud te wijzigen.

Opmerking

In IE is innerHTML alleen-lezen voor een aantal elementen: dit zijn allemaal tabelelementen, met uitzondering van en , evenals en .

We hebben bijvoorbeeld een lege tabel zonder element gemaakt en we willen het programmatisch invoegen in via innerHTML:

IE zal een "onbekende runtimefout" genereren en andere browsers zullen het plakken doen.

Tegelijkertijd, als we de bestaande inhoud van een element opvragen , bijvoorbeeld via alert(document.getElementById("id").innerHTML) , dan werkt dit in IE.

Retourneert een tekenreeks die de naam van de tag van het element bevat. Alle tagName-waarden bevatten alleen hoofdletters.

Voorbeeld

De eigenschap innerHTML testen

Paragraaf om in te voegen

In deze les bekijken we wat de DOM is, waarom deze nodig is en hoe deze is gebouwd.

Wanneer een browser een pagina opvraagt ​​en de bron-HTML-code als reactie van de server ontvangt, moet deze deze eerst parseren. Tijdens het analyseren en parseren van HTML-code bouwt de browser op basis daarvan een DOM-boom.

Nadat deze en een aantal andere acties zijn voltooid, begint de browser de pagina weer te geven. In dit proces gebruikt hij uiteraard al de DOM-boom die hij heeft gemaakt, en niet de originele HTML-code.

DOM is een documentobjectmodel dat de browser in het geheugen van de computer aanmaakt op basis van de HTML-code die hij van de server ontvangt.

Simpel gezegd: HTML-code is de tekst van een pagina, en DOM is een reeks gerelateerde objecten die door de browser worden gemaakt bij het parseren van de tekst.

In Chrome kan de broncode van de pagina die de browser ontvangt worden bekeken op het tabblad ‘Bron’ in het paneel ‘Web Developer Tools’.

Chrome heeft geen tool waarmee je de DOM-structuur die het maakt, kunt bekijken. Maar er is een weergave van deze DOM-boom in de vorm van HTML-code, deze is beschikbaar op het tabblad “Elementen”. Deze DOM-representatie is voor een webontwikkelaar uiteraard veel handiger om mee te werken. Daarom is er geen tool die de DOM als een boomstructuur zou weergeven.

Objecten in dit model zijn samengesteld uit bijna alles wat in HTML staat (tags, tekstinhoud, opmerkingen, enz.), inclusief het document zelf. De relaties tussen deze objecten in het model worden gevormd op basis van hoe de HTML-elementen ten opzichte van elkaar in de code zijn gepositioneerd.

In dit geval kan de DOM van het document na de vorming ervan worden gewijzigd. Wanneer de DOM verandert, tekent de browser vrijwel onmiddellijk de paginaafbeelding opnieuw. Hierdoor komt onze paginaweergave altijd overeen met de DOM.

Om de DOM programmatisch te kunnen lezen en wijzigen, biedt de browser ons een DOM API of, met andere woorden, een programmeerinterface. Simpel gezegd is de DOM API een verzameling van een groot aantal verschillende objecten, hun eigenschappen en methoden die we kunnen gebruiken om de DOM te lezen en te wijzigen.

Om met de DOM te werken wordt in de meeste gevallen JavaScript gebruikt, omdat... Tegenwoordig is het de enige programmeertaal waarin scripts in een browser kunnen worden uitgevoerd.

Waarom hebben we de DOM API nodig?

We hebben het nodig zodat we JavaScript kunnen gebruiken om de pagina direct te wijzigen, d.w.z. maak het dynamisch en interactief.

De DOM API biedt ons (ontwikkelaars) een groot aantal methoden waarmee we alles op de pagina kunnen veranderen en met de gebruiker kunnen communiceren. Die. Met deze software-interface kunnen we complexe interfaces en formulieren maken, gebruikersacties verwerken, verschillende elementen op de pagina toevoegen en verwijderen, de inhoud, eigenschappen (attributen) ervan wijzigen en nog veel meer.

Waaruit bestaat de HTML-code van een pagina?

Voordat u verdergaat met het bestuderen van het documentobjectmodel, moet u eerst onthouden wat de broncode van een webpagina (HTML-document) is.

De broncode van een webpagina bestaat uit tags, attributen, opmerkingen en tekst. Tags zijn de fundamentele syntactische constructie van HTML. De meeste zijn gekoppeld. In dit geval gaat één ervan open en sluit de andere. Eén zo'n paar tags vormt een HTML-element. HTML-elementen kunnen aanvullende parameters hebben: attributen.

Om bepaalde opmaak in een document te maken, bevinden sommige elementen zich in andere. Als gevolg hiervan kan een HTML-document worden weergegeven als een reeks HTML-elementen die in elkaar zijn genest.

Beschouw als voorbeeld de volgende HTML-code:

Paginatitel Artikeltitel Artikelsectie

In deze code is het rootelement html. Het bevat hoofd- en lichaamselementen. Het head-element bevat een titel en het body-element bevat een h1 en een div. Het div-element bevat op zijn beurt h2 en p.

Laten we nu eens kijken hoe de browser een DOM-boom bouwt op basis van HTML-code.

Zoals hierboven al beschreven, bouwt de browser een boom op basis van HTML-elementen en andere entiteiten van de paginabroncode. Bij het uitvoeren van dit proces wordt rekening gehouden met het nesten van elementen in elkaar.

Als gevolg hiervan gebruikt de browser de resulterende DOM-boom niet alleen in zijn werk, maar biedt hij ons ook een API om er gemakkelijk mee te werken via JavaScript.

Bij het construeren van de DOM maakt de browser objecten (DOM-boomknooppunten) uit HTML-elementen, tekst, opmerkingen en andere entiteiten van deze taal.

In de meeste gevallen zijn webontwikkelaars alleen geïnteresseerd in objecten (knooppunten) die zijn gevormd uit HTML-elementen.

Tegelijkertijd maakt de browser niet alleen objecten uit HTML-elementen, maar verbindt deze ook met bepaalde verbindingen met elkaar, afhankelijk van hoe elk van hen zich in de code tot elkaar verhoudt.

Elementen die direct in een bepaald element voorkomen, zijn kinderen in relatie daarmee. En hij is een ouder voor elk van hen. Bovendien zijn al deze elementen broers en zussen (broers) in relatie tot elkaar.

Bovendien heeft elk element in HTML altijd één ouder (het HTML-element waarin het zich rechtstreeks bevindt). In HTML kan een element niet meerdere ouders hebben. De enige uitzondering is het html-element. Hij heeft geen ouder.

Om een ​​DOM-boom te krijgen zoals de browser deze bouwt, hoeft u alleen maar alle elementen te “schikken”, afhankelijk van hun relatie tot elkaar.

Het maken van de DOM-boom gebeurt van boven naar beneden.

In dit geval is de root van de DOM-boom altijd het document zelf (het documentknooppunt). Vervolgens wordt de boom opgebouwd afhankelijk van de structuur van de HTML-code.

De HTML-code die we hierboven hebben bekeken, zou bijvoorbeeld de volgende DOM-boom hebben:

Helemaal bovenaan deze boomstructuur bevindt zich het documentknooppunt. Dit knooppunt is geassocieerd met html, het is het kind ervan. Het html-knooppunt wordt gevormd door het html (...)-element. De knooppunten head(...) en body(...) hebben een ouderrelatie met html. In relatie tot elkaar zijn ze broers en zussen, omdat één ouder hebben. Het hoofdknooppunt is geassocieerd met titel (lt;title>...), het is het onderliggende knooppunt. De h1- en div-knooppunten zijn geassocieerd met body , wat hun ouder is. De div-knoop is verbonden met h2(...) en p(), zij zijn de kinderen ervan.

De boom begint, zoals hierboven vermeld, met het documentobject (knooppunt). Het heeft op zijn beurt één kindknooppunt dat wordt gevormd door het html (...)-element. De elementen head(...) en body(...) zijn in html en zijn daarom de onderliggende elementen. Vervolgens is het hoofdknooppunt het bovenliggende knooppunt van de titel (lt;title>...). De elementen h1 en div zijn genest in het lichaam, wat betekent dat ze de onderliggende elementen zijn. De div bevat direct de elementen h2 (...) en p (). Dit betekent dat het div-knooppunt voor elk van hen de ouder is.

Zo eenvoudig is het om een ​​DOM-boom in een browser te bouwen op basis van HTML-code.

Waarom moet je weten hoe de DOM-boom is opgebouwd?

Oefening

Maak HTML-code op basis van de DOM-boom die in de afbeelding wordt weergegeven.

Documentobjectmodel

Het Document Object Model (DOM) is een Application Programming Interface (API) voor XML die is uitgebreid om ook met HTML te werken.

In de DOM wordt alle pagina-inhoud (elementen en tekst) weergegeven als een hiërarchie van knooppunten. Beschouw de volgende code:

Eenvoudige pagina

Hallo wereld!

Deze code kan worden weergegeven met behulp van de DOM als een hiërarchie van knooppunten:

Door een document weer te geven als een boom van knooppunten, geeft de DOM API ontwikkelaars volledige controle over de inhoud en structuur van een webpagina.

Bij het beschrijven van de boomstructuur van het DOM wordt terminologie gebruikt die is ontleend aan stambomen.

Het knooppunt dat zich direct boven een bepaald knooppunt bevindt, wordt dus de ouder van dit knooppunt genoemd. Knooppunten die zich één niveau onder een bepaald knooppunt bevinden, worden kinderen van dit knooppunt genoemd. Knooppunten die zich op hetzelfde niveau bevinden en dezelfde ouder hebben, worden broers en zussen genoemd. Knooppunten die zich op een willekeurig aantal niveaus onder een bepaald knooppunt bevinden, worden de onderliggende knooppunten genoemd. Ouder, grootouder en alle andere knooppunten die zich op een willekeurig aantal niveaus boven een bepaald knooppunt bevinden, worden hun voorouders genoemd.

BOM (Browser Object Model vertaald uit het Engels - Browser Object Model) biedt toegang tot het browservenster en stelt u in staat het en de elementen ervan te manipuleren.

BOM's bieden toegang tot browserfunctionaliteit, onafhankelijk van de inhoud van de webpagina. Het onderwerp BOM is zowel interessant als complex omdat, vanwege het lange ontbreken van een specificatie, browserleveranciers de vrijheid hebben gehad om BOM naar eigen inzicht uit te breiden. Veel elementen die in verschillende browsers vergelijkbaar zijn, zijn de facto standaarden geworden die vandaag de dag nog steeds worden gevolgd vanwege onderlinge compatibiliteit. Om deze fundamentele aspecten van JavaScript te standaardiseren, heeft het W3C kernstuklijstelementen in de HTML5-specificatie gedefinieerd.

Dit gedeelte biedt een korte introductie tot het Document Object Model (DOM) - wat het DOM is, hoe HTML- en XML-documentstructuren worden geleverd en hoe u ermee kunt communiceren. In dit onderdeel vindt u achtergrondinformatie en voorbeelden.

Het Document Object Model (DOM) is een programmeerinterface (API) voor HTML- en XML-documenten. De DOM biedt een gestructureerde weergave van een document en definieert hoe die structuur toegankelijk is voor programma's die de inhoud, stijl en structuur van het document kunnen wijzigen. De DOM-weergave bestaat uit een gestructureerde groep knooppunten en objecten met eigenschappen en methoden. In wezen verbindt de DOM een webpagina met scripttalen of programmeertalen.

Een webpagina is een document. Het document kan zowel in het browservenster als in de HTML-code zelf worden gepresenteerd. Het is in ieder geval hetzelfde document. De DOM biedt een andere manier om dit document weer te geven, op te slaan en te manipuleren. De DOM ondersteunt de objectgeoriënteerde weergave van een webpagina volledig, waardoor het mogelijk wordt deze aan te passen met behulp van een scripttaal zoals JavaScript.

U hoeft niets speciaals te doen om de DOM te manipuleren. Verschillende browsers hebben verschillende implementaties van de DOM, en deze implementaties vertonen een verschillende mate van conformiteit met de daadwerkelijke DOM-standaard (een onderwerp waar we in deze documentatie niet op in willen gaan), maar elke browser gebruikt een andere DOM om webpagina's interoperabel te maken met scripttalen.

Door een script te maken met behulp van het element, of door instructies in een webpagina op te nemen om het script te laden, kunt u onmiddellijk beginnen met het gebruik van de application programming interface (API), waarbij u de elementen gebruikt om te communiceren met het document zelf, of om afstammelingen te verkrijgen van dat document, d.w.z. verschillende elementen op de pagina. Uw DOM-programmering kan zoiets eenvoudigs zijn als het afdrukken van een bericht met behulp van een objectfunctie, of complexere DOM-methoden gebruiken die nieuwe inhoud creëren, zoals weergegeven in het volgende voorbeeld:

In het volgende voorbeeld wordt JavaScript-code gedefinieerd binnen een element; deze code stelt een functie in wanneer het document wordt geladen (wanneer de gehele DOM beschikbaar is voor gebruik). Deze functie maakt een nieuw H1-element, voegt tekst toe aan dat element en voegt vervolgens de H1 toe aan de documentboom:

In deze paragraaf willen we op een eenvoudige en toegankelijke manier de verschillende typen en objecten kort beschrijven. Er worden een aantal verschillende datatypes gebruikt in de API waar je op moet letten. Voor de eenvoud verwijst de voorbeeldsyntaxis in deze sectie doorgaans naar knooppunten als element s, arrays van knooppunten als nodeList s (of eenvoudigweg element s), en knooppuntattributen als eenvoudigweg attribuut s.

Hieronder vindt u een tabel met een korte beschrijving van deze gegevenstypen.

Dit is een tutorial over objecten en de feitelijke dingen die u kunt gebruiken om de DOM-hiërarchie te manipuleren. Er zijn veel plaatsen waar het verrassend kan zijn om te begrijpen hoe het werkt. Een object dat een HTML-formulierelement vertegenwoordigt, haalt bijvoorbeeld de eigenschap name uit de HTMLFormElement-interface en de eigenschap className uit de HTMLElement-interface. In beide gevallen bevindt de gewenste eigenschap zich in dat formulierobject.

Bovendien kan de relatie tussen objecten en de interfaces die ze in de DOM implementeren verrassend zijn en deze sectie probeert iets te vertellen over de bestaande interfaces in de DOM en hoe deze toegankelijk zijn.

Veel objecten implementeren acties van meerdere interfaces. Het table-object implementeert bijvoorbeeld een speciaal object dat methoden bevat zoals createCaption en insertRow . Maar aangezien dit een tabel is, is het ook een HTML-element. De tabel implementeert de Element-interface, beschreven in de sectie. Omdat een HTML-element (in de DOM-zin) ten slotte een knooppunt in de boom is dat het objectmodel voor een HTML- of XML-pagina vormt, implementeert een tabelelement ook de meer algemene Node-interface waarvan Element is afgeleid.

Var-tabel = document.getElementById("tabel"); var tableAttrs = tabel.attributen; // Knooppunt-/elementinterface voor (var i = 0; i< tableAttrs.length; i++) { // HTMLTableElement interface: border attribute if(tableAttrs[i].nodeName.toLowerCase() == "border") table.border = "1"; } // HTMLTableElement interface: summary attribute table.summary = "note: increased border";

In deze sectie worden enkele van de meest voorkomende interfaces in de DOM vermeld. Het idee is niet om te beschrijven wat deze API-methoden doen, maar om u enkele gedachten te geven over de soorten methoden en eigenschappen die u vaak tegenkomt bij het gebruik van de DOM. Deze algemene delen van de API worden gebruikt in de meeste voorbeelden in de sectie aan het einde van deze Help.

Document en venster zijn objecten waarvan u de interfaces vaak gebruikt bij DOM-programmering. Simpel gezegd vertegenwoordigt het vensterobject zoiets als een browser, en vertegenwoordigt het documentobject de hoofdmap van het document zelf. Element erft van de gemeenschappelijke Node-interface, en deze interfaces bieden samen vele methoden en eigenschappen die op individuele elementen kunnen worden toegepast. Deze elementen kunnen ook afzonderlijke interfaces hebben voor het werken met de gegevenstypen die deze elementen bevatten, zoals in het tabelobjectvoorbeeld in het vorige geval.

Hieronder vindt u een korte lijst met algemene API-leden die worden gebruikt bij het programmeren van web- en XML-pagina's met behulp van de DOM:

• parentNode.appendChild(knooppunt)

Dit document bevat voorbeelden van elke interface die u kunt gebruiken bij uw ontwikkeling. In sommige gevallen zijn de voorbeelden volwaardige webpagina's met toegang tot de DOM in het element, waarbij ook de elementen worden vermeld die nodig zijn om het script op het formulier uit te voeren, en de HTML-elementen waarop DOM-bewerkingen zullen worden uitgevoerd. Wanneer dit gebeurt, kunt u het voorbeeld eenvoudigweg kopiëren en in een nieuw HTML-document plakken, het opslaan en in uw browser uitvoeren.

Er zijn echter gevallen waarin de voorbeelden beknopter zijn. Om voorbeelden uit te voeren die slechts de basis laten zien van hoe interfaces omgaan met HTML-elementen, kunt u een testpagina voorbereiden waarin u functies in scripts plaatst. De volgende zeer eenvoudige webpagina bevat een header-element waarin u functies kunt plaatsen om de interface te testen. De pagina bevat verschillende elementen met attributen die kunnen worden geretourneerd, ingesteld of met andere woorden gemanipuleerd, en bevat de gebruikersinterface die nodig is om de gewenste functies vanuit de browser aan te roepen.

U kunt deze testpagina of een soortgelijke pagina gebruiken om de DOM-interfaces die u interesseren te testen en te zien hoe ze in browsers werken. U kunt de inhoud van de functie test() indien nodig bijwerken, meer knoppen maken of elementen toevoegen als dat nodig is.

Om veel interfaces op één pagina te testen, een reeks eigenschappen die de kleuren van de webpagina veranderen, kunt u een vergelijkbare webpagina maken met een hele “console” van knoppen, tekstvelden en andere elementen. De volgende schermafbeelding geeft een idee van hoe interfaces kunnen worden gegroepeerd om te testen

In dit voorbeeld werkt het vervolgkeuzemenu dynamisch delen van de webpagina bij die toegankelijk zijn vanuit de DOM (bijvoorbeeld achtergrondkleur, linkkleur en tekstkleur). Bij het ontwikkelen van testpagina's is het testen van interfaces, zoals u hebt gelezen, echter een belangrijk onderdeel van het effectief leren werken met de DOM.