The DOM (Document Object Model) is a standard way to access a document within a browser. The DOM could be Core DOM, HTML DOM, XML DOM. The DOM can be very handy and useful when we need to access the specific elements of the document and add some effects to them.
The two of the most useful of the DOM methods could be getElementById and getElementsByTagName. The getElementById will return an element that specified as a parameter in getElementById DOM method. The parameter that passed is a string that represents the ID of an element. The getElementsByTagName -that receive one parameter, the element name as string- will return array that represents elements in the document with the tag name specified as a parameter in getElementsByTagName method.
Here a simple example utilization of getElementById and getElementsByTagName method to add an effect -change the background color- when the mouse cursor over a <li> element and reset the background color when then mouse cursor out a <li> element:
SimpleDom.htm
<html>
<head>
<title>Test Something</title>
<script lang=”javascript” type=”text/javascript”>
window.onload = function()
{
var lis = document.getElementsByTagName(“li”);
for (var i=0;i<lis.length;i++) {
lis[i].onmouseover = function()
{
this.style.backgroundColor = “gainsboro”;
};
lis[i].onmouseout = function()
{
this.style.backgroundColor = “white”;
};
}
};
</script>
</head>
<body>
<ul>
<li>First Element</li>
<li>Second Element</li>
<li>Third Element</li>
</ul>
</body>
</html>
Let’s look at the code in more details. The body of the document consist of an unordered list (ul). The <ul> element have three list item <li> element as childs. The scenario is simple change the background color of <li> element when the mouse is moved over around them and reset the background color of <li> element when the mouse is moved out of them.
To attain this functionalities we using Javascript and DOM to access the document specified in the <body> element. The first line of our Javascript code is window.onload, this function is executed when the window object is fully loaded, in the other word the window.onload executed only when the elements inside a document has been rendered.
To handle window.onload we create an inline function that tells what must be done when the page has been loaded. In this case we will retrieve all of <li> element in a document using getElementsByTagName DOM method and save this element in a variable named lis.
var lis = document.getElementsByTagName(“li”);.
The next step iterate through all of <li> element inside lis variable:
for (var i=0;i<lis.length;i++).
But the most important part here we install two events for each of <li> element, onmouseover (happens when the mouse cursor over an <li> element) and onmouseout (happens when the mouse cursor out from an <li> element).
To handle the onmouseover event we create an inline function that changes the background color of <li> element when the mouse cursor over it.
lis[i].onmouseover = function()
{
this.style.backgroundColor = “gainsboro”;
};
To handle event when the mouse cursor out of an <li> element we create an inline function that reset the background color back to its original color.
lis[i].onmouseout = function()
{
this.style.backgroundColor = “white”;
};
The word this above refers to the <li> element that being iterated. When everything is ready and we move the cursor over an <li> element we should see that the background color of <li> that is being hovered change to gainsboro, and the background color will back to white when the mouse cursor leaves the specified <li> element.
The Javascript and DOM can have more functionalities and usages I hope this simple article will give me and all the readers a clue about the advantage of DOM.
Read, With the Name of Your Lord Who Created 