How to Accessing HTML Elements using javascript?

Q

✍: Guest

A

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

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

We can use the "getElementById" method using the "id" attribute to identify the element (which is generally preferred)

document.getElementById("useless").style.color = "red";

or we can use the "name" attribute to identify the element:

document.forms[0].mybutton.style.color = "blue";

Here is another example of accessing elements with the DOM object:

<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"
onclick="showStatus()" />
</form>

2010-11-23, 4954👍, 0💬