Javascript and the DOM API

Javascript comes with the Document Object Model (DOM), it would be useless without it.  The DOM is not HTML, but it’s an Application programming interface (API) for XML, and it enables you to access your HTML. As a result, it gives you the ability to read, add, delete and modify your html without a page reload.

HTML is an XML variant, and below is a small example of it. (If the following looks unfamiliar to you, then learn some basic HTML)

<title>example title</title>
<p>This is an example of a DOM</p>

The above example is what you type and read, but JavaScript represents it as a node tree that looks like this:

DOM Node Hierarchy

The birth of the DOM API

Javascript only had one purpose when it was first created, and that was to minimize round trips to the server. It was first used for client-side input validation, which needed you to alter the html. Unfortunately, Netscape Navigator 4 and Internet Explorer 4 each implemented it’s own method for accomplisching this feat. It was a big step forward for usability, but it was also a nightmare for programmers, since they couldn’t write cross-platform webpages anymore.

Therefore, the World Wide Web Consortium (W3C) stepped in and created a standard for creating with HTML. And so, DOM Level 1 was born.

Level up

The DOM API has two big groups of methods. The core: which is used for every XML based document and the DOM HTML extensions: for html specific objects and methods.

The internet evolved and so did the API. Level 1 focused on the structure of a document, whereas Level 2 added support for mouse and user-interface events as well as better Cascading Style Sheets (CSS) and traversal methods to iterate over a DOM document. Then came Level 3 which added load and save functionality and validation methods.

You might also hear about DOM level 0, but this never existed. NN4 and IE4 use it to reference to the original DHTML.

=> More detailed info about each level.

It’s only a recommendation

It’s not mandatory, no government enforced a browser manufacturer to use the standard. As a result, not all browsers support everything. A clear overview of which browser supports what is currently not available (read: I can’t find one). As a result, my first option is to go to ‘Can I use‘ and if I can’t find it there, I go to Mozzila’s Developer Network. It covers every method and function, and contains information about browser compatibility.

Hence, use feature detection if you implement an unsupported method. Otherwise you can prompt the user to upgrade to an other browser that does support the recommendations of the standard. Fortunately, most of the modern web browsers implement all of the Level 3 specification.


Question’s and Answers about the DOM

Do other XML based formats have an API?

There are numerous XML markup languages like HTML, furthermore, each comes with it’s own API. They come in all shapes and sizes. A web-based environment uses multiple,but some are only server-side and others represent specific research data and such. Some XML variants: Documents (HTML, XHTML),  Graphics (SVG, XAML),  Mathematics (MathML, CellML), Multimedia presentations (SMIL), Authentication and Authorization (SAML), web feeds (Atom) and many more…

Is the DOM JavaScript Specific?

No, it is not, a lot of other languages implement it as well. That said, EcmaScript Implements the DOM and is a big part of the JavaScript Language.

Is DOM and HTML the same?

Again no, The browser uses the HTML page to built the DOM object. Then in JavaScript, you can access the object and make manipulations. If you take it to the extreme, you can load a page with only JavaScript (so only a html, head and script tag) and generate your entire page from scratch.