Anyway, the Document Object Model (DOM), although it rhymes with COM, has nothing to do with Microsoft, but is a World Wide Web Consortium (W3C) standard defined as:
A platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.
The DOM is separated into 3 different parts / levels:
- Core DOM - standard model for any structured document
- XML DOM - standard model for XML documents
- HTML DOM - standard model for HTML documents
The DOM defines the objects and properties of all document elements, and the methods (interface) to access them. [It] is a standard for how to get, change, add, or delete [XML/HTML] elements.
According to the tutorial:
DOM views an HTML document as a tree-structure ... called a node-tree.
And it goes on to show a diagram of a node tree. I'm not sure how useful this form of representation is for me, but I'll show it below for completeness:
The Tutorial gives a "hello world" example, which to me illustrates the extraordinary messiness of this language/methodology. Before citing the example, I shall mention that two of the objects listed on the reference page are the
document object and the
HTMLElement object. One of the methods listed for the is the
getElementById() method. One of the properties listed for the
HTMLElement object is
.innerHTML, which in any other language would probably be
.text. Another is
.id. So now here is the code:
<p id="intro">Hello World!</p>
document.write("<p>The intro paragraph text is: " + txt + "</p>");
HTMLElement object is referred to by its id, and its
document.write method. The result is shown in the image below: