Theory of DOM

by mgiuffrida

HTML

<div id="outer" class="outerClass">
  <div id="inner">
    Inner div
  </div>
</div>
<template id="templ">
  <script id="s2">console.log('Hello s2');</script>
</template>

JavaScript

// Tested with Chrome 52 and FF <TODO>.

//
// Theory of DOM
// a (TODO:) 15-minute tutorial introducing the terminology and mechanisms of DOM
//

//
// Prologue
//

// I always thought of DOM as a loose term for "the stuff on the page". Which, to be fair, is a reasonable interpretation of "Document Object Model" -- a **Model** of **Objects** and the APIs they must provide. Browsers use this model with HTML documents to build and render web pages.

// Informational:
// Java implements the DOM for working with XML documents, and was originally a first-class citizen in the DOM spec. Other languages have built-in or third-party DOM support, like Python's `xml.dom` API. But after decades of browser compatability problems resulting from insufficiently specific definitions, the W3C has laid down the law: the modern spec uses Web IDL. If the name isn't self-explanatory, it's an Interface Definition Language which expclitly defines JavaScript bindings to make life easy for web developers like you (and browser developers like me).
//
// What this means for users (that's us) is that when we see an interface like this:
//
// [Exposed=Window]
// interface Element : Node {
//   readonly attribute DOMString tagName;
//   boolean hasAttributes(DOMString name);
//   HTMLCollection getElementsByTagName(DOMString localName);
// }
//
// we can assume that `window.Element` is a JavaScript constructor function, which inherits from  Node.prototype, whose prototype additionally includes a readonly string `tagName`, a function `hasAttributes` that retutrns a boolean, and a function `getElementsByTagName` that takes a string and returns an `HTMLCollection` object whose type is defined elsewhere in the spec.

setup();

//
// Events
//

// Informational
// Since DOM documents are modeled as node trees, the DOM is all about Nodes, right? Actually, no! Events and EventTargets are defined first in the DOM spec. A Node is the only kind of EventTarget defined in the spec, but there are others...