DHTML and the Document Object Model - HTML

The DOM is a standardized process for accessing the parts of a Web page through a common application programming interface (API). What this means in practical terms is that each element in a document is accessible via script, usually JavaScript. We say “usually” JavaScript because no rule states that a language that accesses the DOM needs to be JavaScript. It can be any language, from Java (which is different than JavaScript) to C# or Visual Basic. As it turns out, though, most DOM-related activity vis-a-vis the browser is powered by JavaScript. The standardized form of JavaScript is called ECMAScript.

This is a relevant fact because usually if you confine your scripting to a combination of the W3C’s Level One Core DOM and ECMAScript, you’ll be pretty successful at achieving cross-browser scripting compatibility. The W3C’s Level One Core DOM is basically a set of properties and methods that can be accessed from a given element. For example, one of the most ubiquitous (and dastardly, in many people’s opinion) methods is the window.open() method, which makes it possible for advertising pop-ups to appear. The open() method acts upon the window object, which, although not an element (the DOM isn’t restricted to elements), is still an object that can be manipulated by script.

Using event handlers

Notice the onclick attribute in the following code fragment:

onclick=“this.style.fontSize=‘60px’; this.style.color=‘red’”>

This tells the browser that when the user clicks the div element, something should happen. In this case, that something is that the following two attributes of the style element will change:

  • style.fontSize=‘60px’ tells the browser to change the font size to 60 pixels.
  • style.color=‘red’” tells the browser to change the color to red.

The onclick attribute is actually an event handler. An event is something that happens, as you probably already know. A party, for example, is an event. When a human triggers the onparty event, sometimes that human falls down drunk. When a human triggers an onclick event in a browser, more benign things take place, such as text color changes, menu changes, and so on. Table shows the common event handlers associated with JavaScript.

Javascript Event handlers

When one of these events takes place, code is executed. Many browsers have their own, custom event handlers, but if you stick with those found, you’ll find cross-compatibility issues much easier to solve.

It’s all about objects

The other thing you should have noticed about the JavaScript code fragment you saw at the beginning of this chapter is that there is some interesting dot syntax going on:


This is the key to all DHTML and working with the DOM. When script accesses an object, it does the same thing you need to do when finding objects on your computer. When you look for a file on your hard drive, you drill down a group of nested folders to find something. So the final path might look something like this:

C:Documents and SettingsChuckBooksgoodbook.doc

On the World Wide Web, the same thing happens:

Here, the Web server drills down a specific path that finds the document in bold. When you use JavaScript and the DOM you do the same basic thing. You begin with a top-level object, which is always the window object. Normally, you don’t need to name that, because it’s understood to just always be there. Then, you drill down to the next level. The previous code which demonstrated how to use an onclick event (onclick=“this.style.fontSize=‘60px’;) was able to circumvent this because the same object that called the event had changes (it changed itself), so we could use the this keyword.

However, had another object been changed, you would have had to name that object’s position within the hierarchy of document objects. The easiest way to do that is to be sure you use the id attribute (which means the HTML object must contain an id attribute containing a unique value), and then drill down to the object in your code. You can access most of the objects associated with a browser window using JavaScript and the DOM.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics