To do something interesting with HTML elements, we must first be able to uniquely identify which element we want. In the example

<body>
<form action="">
<input type="button" id="useless" name="mybutton" value="doNothing" />
</form>
</body>

We can use the getElementById method (which is generally preferred) document.getElementById(“useless”).style.color = “red”;
or we can use the older hierarchical navigation method, document.forms[0].mybutton.style.color = “blue”; Notice that this uses the “name” attribute of the element to locate it.

Example of Accessing Elements in a DOM

<script type="text/javascript" >
function showStatus() {
var selectWidget = document.forms.beerForm.elements["beer"];
var myValue = selectWidget.options[selectWidget.selectedIndex].value;
alert('You drank a \"'+ myValue +"\"");
return true;
}
</script>
<form name="beerForm" action="">
<select name="beer">
<option selected="selected">Select Beer</option>
<option>Heineken</option>
<option>Amstel Light</option>
<option>Corona</option>
<option>Corona Light</option>
<option>Tecate</option>
</select>
<input type="button" name="submitbutton" value="Drink"
Saikat Banerjee Page 9
onclick="showStatus()" />
</form>

Also Read:

Categorized in: