Pin Me

Getting Elements Using the HTML DOM and JavaScript

written by: Carmelo Carbonara•edited by: Linda Richter•updated: 3/12/2012

Using the HTML DOM in web design allows the use of Dynamic HTML (DHTML), saves on bandwidth costs and helps overcome cross-browser web page rendering problems. This article illustrates setting the basic property of an HTML input element using a JavaScript function.

  • slide 1 of 6


    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.

  • slide 2 of 6

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

  • slide 3 of 6

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

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

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


  • slide 4 of 6

    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&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" ;


  • slide 5 of 6

    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.

  • slide 6 of 6

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

    W3Schools Online Web Tutorials: DHTML Tutorial

    Gecko DOM Reference

    Microsoft: HTML and DHTML Reference