Getting Elements Using the HTML DOM and JavaScript

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.

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&nbsp;<input type="text" value="" name="" id="firstName" style="background:lightyellow;"/>

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&nbsp;<input type="text" value="" name="" id="firstName" />

<script language="JavaScript" type="text/javascript">

var firstField=document.getElementById("firstName");

firstField.name="firstName";

firstField.style.background="lightyellow";

</script>

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&nbsp;<input type="text" value="" name="" id="firstName" />

<script language="JavaScript" type="text/javascript">

function domElement(obj)

{

return document.getElementById(obj)

};

domElement("firstName").style.background="lightyellow" ;

</script>

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.

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 Online Web Tutorials: HTML DOM Reference

W3Schools Online Web Tutorials: DHTML Tutorial

Gecko DOM Reference

Microsoft: HTML and DHTML Reference