HTML and the DOM

The early browsers to run JavaScript provided very limited ways for the script to interact with the HTML in the web page. There was little choice but to had code JavaScript jumbled in with the HTML in order for the JavaScript to be able to interact with that HTML. This made things very inefficient where the same processing was needed in multiple places. A simple JavaScript change could result in having to manually update dozens or even hundreds of pages that used the code. This same problem also applied to misusing HTML tables to do the page layout where a simple change to the layout required every page of the site to be amended.

The page layout problem was solved by the introduction of CSS (cascading style sheets). The JavaScript interaction problem was solved by the introduction of the DOM (document object model). Early browsers experimented with proprietary object models. Netscape 4 introduced one and Internet Explorer introduced a completely different one. For a while it was necessary to test in the JavaScript for when the standard DOM was not supported to check if either the IE or Netscape proprietary one was supported instead. Fortunately once IE4 and Netscape 4 died out this testing ceased to be required as all browsers since then have supported the standard document object model. There were still a few differences between JavaScript and jScript (the JavaScript lookalike language that IE8 and earlier ran instead of JavaScript) but since IE11 is now the only version of Internet Explorer that even Microsoft still support the only differences we need worry about in JavaScript any more is which version of JavaScript the browser supports so we can treat browsers that don't support the version we are using as not supporting JavaScript at all.

Now you might be wondering at this point what all this has to do with HTML and why I have made this an HTML article rather than a JavaScript one. Well the DOM is the interface between HTML and JavaScript and with all of the JavaScript code correctly contained inside an IIFE (immediately invoked function expression) the only way that the HTML and JavaScript can communicate with one another is via the DOM.

The issue of jumbling JavaScript inside of the HTML now no longer arises as any JavaScript hard coded in the HTML now has no access whatever to the properly written JavaScript as they are in completely different scopes. The only thing that is actually shared between the two is the DOM.

The following code is broken because the JavaScript it contains refers to a function that doesn't exist in the scope that the HTML is running in (assuming that the script is properly wrapped in an IIFE).

<button id="next" onclick="myfunc()">click</button>

Instead we need to have the JavaScript reference the DOM (in this case the id="next" in order to attach the event processing inside the IIFE.

(function() {
function myfunc() {
// function code
document.getElementById('next').addEventListener('click', myfunc, false);

Of course ids are not the only thing in the DOM that is shared between the HTML and the JavaScript. Anything in the HTML - both the tag names and any of the attributes of the tags - has a DOM reference that can be used to pass information back and forth between the HTML and any JavaScript.

Keeping the HTML as clean as possible with just the tags needed to semantically mark up the meaning of the content of the page and keeping the CSS and JavaScript completely separate using just the DOM to link them all together is what leads to the most efficient easiest to maintain web pages.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow