DOM Zelfstudie
Aan de slag met DOM

Opmerkingen

versies

Bestaande HTML-elementen ophalen

Een van de meest voorkomende taken is het ophalen van een bestaand element uit de DOM om te manipuleren. Meestal worden deze methoden in een document uitgevoerd, omdat dit het hoofdknooppunt is, maar al deze methoden werken op elk HTML-element in de structuur. Ze zullen alleen kinderen terugbrengen van het knooppunt waarop het is uitgevoerd.

Ophalen op ID

var element = document.getElementById("logo");

element bevat het (alleen) element waarvan het id kenmerk is ingesteld op "logo", of bevat null als een dergelijk element niet bestaat. Als er meerdere elementen met deze id bestaan, is het document ongeldig en kan er van alles gebeuren.

Ophalen op tagnaam

var elements = document.getElementsByTagName("a");

elements bevatten een live HTMLCollection (een HTMLCollection object) van alle koppelingstags in het document. Deze verzameling is gesynchroniseerd met de DOM, dus eventuele wijzigingen in de DOM worden weerspiegeld in deze verzameling. De collectie biedt willekeurige toegang en heeft een lengte.

var element = elements[0];
//Alternative
element = elements.item(0);

element bevat het eerste aangetroffen HTML-linkelement, of null als de index buiten de grenzen valt

var length = elements.length;

length is gelijk aan het aantal HTML-linkelementen dat momenteel in de lijst staat. Dit nummer kan veranderen wanneer de DOM wordt gewijzigd.

Ophalen per klas

var elements = document.getElementsByClassName("recipe");

elements bevatten een live HTMLCollection (een array-achtig object) van alle elementen waarvan het class attribuut "recept" bevat. Deze verzameling is gesynchroniseerd met de DOM, dus eventuele wijzigingen in de DOM worden weerspiegeld in deze verzameling. De collectie biedt willekeurige toegang en heeft een lengte.

var element = elements[0];
//Alternative
element = elements.item(0);

element bevat het eerste aangetroffen HTML-element met deze klasse. Als dergelijke elementen niet bestaan, heeft element de waarde undefined in het eerste voorbeeld en null in het tweede voorbeeld.

var length = elements.length;

length is gelijk aan het aantal HTML-elementen dat momenteel de klasse "recept" heeft. Dit nummer kan veranderen wanneer de DOM wordt gewijzigd.

Ophalen op naam

var elements = document.getElementsByName("zipcode");

elements zal bevatten levende NodeList (een matrix-achtige object) van alle elementen met hun name attribute ingesteld op "postcode". Deze verzameling is gesynchroniseerd met de DOM, dus eventuele wijzigingen in de DOM worden weerspiegeld in deze verzameling. De collectie biedt willekeurige toegang en heeft een lengte.

var element = elements[0];
//Alternative
element = elements.item(0);

element bevat het eerste aangetroffen HTML-element met deze naam.

var length = elements.length;

length is gelijk aan het aantal HTML-elementen dat op dit moment "postcode" als hun attribuut heeft. Dit nummer kan veranderen wanneer de DOM wordt gewijzigd.

Ermee beginnen

De DOM (Document Object Model) is de programmeerinterface voor HTML- en XML-documenten, het definieert de logische structuur van documenten en de manier waarop een document wordt benaderd en gemanipuleerd.

De belangrijkste implementeerders van de DOM API zijn webbrowsers. Specificaties worden gestandaardiseerd door het W3C en WHATWG groepen en het objectmodel geeft de logische model voor de programmeerinterface.

De weergave van de DOM-structuur lijkt op een boomachtige weergave, waarbij elke knoop een object is dat een deel van de markup vertegenwoordigt, afhankelijk van het type neemt elk element ook specifieke en gedeelde functionaliteiten over.

De naam "Document Object Model" werd gekozen omdat het een "objectmodel" is in de traditionele objectgeoriënteerde ontwerp-betekenis: 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. Met andere woorden, in het voorbeeld van een HTML-diagram, vertegenwoordigen de knooppunten geen gegevensstructuur, ze vertegenwoordigen objecten met functies en identiteit. Als een objectmodel identificeert het Document Object Model:

• de interfaces en objecten die worden gebruikt om een document weer te geven en te manipuleren
• semantiek van deze interfaces en objecten - inclusief gedrag en attributen
• de relaties en samenwerkingen tussen deze interfaces en objecten

Wacht tot DOM is geladen

Gebruik DOMContentLoaded wanneer de <script> -code die samenwerkt met DOM is opgenomen in de sectie <head> . Indien niet ingepakt in de DOMContentLoaded callback, zal de code fouten geven zoals

Kan niets van null

document.addEventListener('DOMContentLoaded', function(event) {
    // Code that interacts with DOM
});

^{https://html.spec.whatwg.org/multipage/syntax.html#the-end}

Alternatief voor DOMContentLoaded

Een alternatief (geschikt voor IE8 )

// Alternative to DOMContentLoaded
document.onreadystatechange = function() {
    if (document.readyState === "interactive") {
        // initialize your DOM manipulation code here
    }
}

^{https://developer.mozilla.org/en/docs/Web/API/Document/readyState}

Gebruik innerHTML

HTML

<div id="app"></div>

JS

document.getElementById('app').innerHTML = '<p>Some text</p>'

en nu ziet HTML er zo uit

<div id="app">
    <p>Some text</p>
</div>

HTML-opmaak

voorbeeld invoer:

<html>
  <head>
    <title>the title</title>
    <link href='css/app.css' type='text/css' rel='stylesheet'>
    <script src='js/app.js'></script>
  </head>
  <body>
    <h1>header</h1>
    <div>
      <p>hello!</p>
    </div>
  </body>
</html>

DOM-elementuitvoer:

                             ------------                             
                             | document |    <--- DOM root object.                           
                             ------------                             
                                  |                                   
                                  |                                   
                             ------------                             
                             |   html   |     <--- document.documentElement                  
                             ------------                             
                    ______________|______________                     
                    |                           |                     
               ------------                ------------               
               |   head   |                |   body   |               
               ------------                ------------               
      ______________|______________             |______________       
      |             |             |             |             |       
 ------------  ------------  ------------  ------------  ------------ 
 |  title   |  |   link   |  |  script  |  |    h1    |  |   div    | 
 ------------  ------------  ------------  ------------  ------------ 
                                                              |       
                                                              |       
                                                         ------------ 
                                                         |    p     | 
                                                         ------------ 

Alle bovenstaande elementen erven van de HTMLElement-interface en worden aangepast, afhankelijk van de specifieke tag