Using the HTML DOM and Javascript

Intro

It’s simple enough to set a property on an HTML tag directly but it can also be done using JavaScript functions that access the HTML Document Object Model (DOM). The DOM provides an easy way to access an element as an object so that its properties, attributes and events can be set or retrieved. It works for HTML and XHTML elements. The examples in this article are using XHTML.

Some of the advantages :

• avoid unnecessary client to server round trips for validating inputs
• minimizes server CPU and bandwidth utilization
• helps solve most browser compatibility problems

As an example, we’ll set an input element’s background color. All the methods shown below will render the same view in the broswer.

Set Properties in the Tag

When creating the web page through an editor or manual coding, the properties and events can be specified directly as shown in the code view below.

This is the code view :

First Name 

Set Properties Using the getElementById DOM method

The DOM provides the getElementById(tagID) method to access any element with an id attribute, set. That includes head tags, meta tags, script blocks, and any HTML / XHTML defined elements. The tagID is the id attribute or property that’s assigned to the tag. If we want to create a named JavaScript variable that represents the element as a JavaScript object, the tag and script code is shown in the code view below.

*Note: the web page renders in a top-down fashion so the element has to be defined and loaded before the script is parsed and understood by the browser otherwise you will get an error message. In the example, the element code is written before the script code section

This is the code view :

First Name 

Set Element Properties via Reusable JavaScript Functions

The code below shows the same tag code but with a javascript function that returns the input element on-demand. It is a named var or object. More importantly, it is the result of a function. So we can use the function domElement(obj) any time we want to access any element on the web page. The advantage here is not having to create a multitude of named variables or objects. We can just access the element as an object, on-demand.

*Notes: A script function can appear before or after it is called as long as it is available when it is called. For example, I can have a text input element somewhere down in the body of the page with the script block up at the top of the body.

This is the code view :

First Name 

Browser Compatibility

Cross-browser compatibility is important if a wide audience is expected and minimizes browser detection requirements to accommodate different User Agents. These issues can impact web site performance and visitor returns.

For example, a well-known browser uses a document.all collection as a way of accessing all the DOM elements in a HTML /XHTML page but this is not widely supported in other popular browsers. Most browsers, are mostly DOM compliant except for manipulating event objects. However, events can still be accessed and manipulated through the DOM as an attribute; more on this in another article.

Reference for Further Reading

It’s a good idea to have a good reference on a Browser’s implementation of DHTML and the DOM. This makes it handy to look up the syntax and usage of the various objects, methods, properties, attributes etc.

Some of these are:

W3Schools.Com

Gecko DOM Reference

DOM Introduction & Resources

This post is part of the series: Web Design using DHTML and the DOM

Creating web sites with DHTML based on the DOM can increase server performance, lower bandiwdth utilization and solve most cross-browser compatibility issues.

1. Getting Elements Using the HTML DOM and JavaScript
2. Applying Events to DHTML Web Pages Using Javascript and the DOM
3. Validating Input at the Client: Check for blank or required fields
4. Validating Input at the Client: trim the field
5. Validating Input at the Client: check numeric value fields
6. Leveraging CSS Styles
7. DOM getElementsByTagName Method for Bulk Element Formating
8. Unraveling the JavaScript Switch Statement