JavaScript How to access DOM of an HTML Page

As known JavaScript is one of the powerful Scripting language, which gets interpreted on Web Browser. Basic usage of JavaScript is
#1.Client side validations.
#2.To perform dynamic operations on an Webpage.

Disadvantage part of JavaScript is, it can be manually disabled by user, on his/her Browser.

Below are few examples

Change color of a button periodically

Below is sample JavaScript code to dynamically change background color of button for every one second. However this approach can be used for any HTML elements, and time interval also can be changed as required.

<html>
<head>
<title>Button with dynamic Random color</title>
<script type="text/JavaScript">
window.onload = function() {            
    function rndBtnClr() {
var rndColor = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);

document.getElementById("btn").style.background=rndColor;
//get the reference of the Button, and set its background color

    }
    setInterval(rndBtnClr, 1000);
}
</script>
</head>
<body>
Can you observe dynamic random color, for below button.<br>
<input type="button" value="Click Me" id="btn" />
</body>
</html>

rndBtnClr() method is invoked every one second(i..e 1000 ms). Six digit hexadecimal random color is being generated by below line.

var rndColor = ‘#’ + (Math.random() * 0xFFFFFF << 0).toString(16);

The same in considered as DHTML(Dynamic HTML)

Dynamically enabled or disable a HTML element

Below javascript enables or disables a button, by clicking Click Me button.

callme() function is clicked whenever “Click Me” button is clicked.if condition checks if the button is currently disabled, if button is currently disabled, then button is enabled, else button is disabled.

<html>
<head>
<title>Enable/Disable an HTML element, dynamically</title>
<script type="text/javascript">
function callme(){
if(document.getElementById("btn").disabled)
{
document.getElementById("btn").disabled=false;
}
else
{
document.getElementById("btn").disabled=true;
}
}
</script>
</head>
<body>
Can you observe dynamic random color, for below button.<br>
<input type="button" value="Click Me" onclick="callme()"/>
<input type="button" value="Enabled/Disabled button" id="btn" />
</body>
</html>

You may also like to read:
List of input controls in HTML
HTML marquee tag example
favicon for a website