Manipulating DOM elements is an important task in any language. Many JavaScript add-on libraries such as JQuery simplify addressing particular aspects of the DOM. However I think it is still very useful to know how to do the equivalent action in pure JavaScript.
The Basics
Getting a single form element using the JavaScript getElementById( function is a useful ability… however sometimes you will have the need to loop through all elements of a particular kind on a page and run code against only a select few of the page elements as you loop.
To get elements by type, use the JavaScript getElementsByTagName( function. This will give you an array of elements to loop through. As you are looping though the elements on your page, you can narrow down your search further by only selecting page elements of a particular type. In this case we will select only elements of the type ‘checkbox’. You can check this using the appropriately named .type attribute.
A Working Example
Below I’m including a working example of looping through all of the input elements on a Web form, and how to isolate and manipulate only specific types of form elements… which in this case involves checkboxes.
The first example line in the getCheckbox() function is written as a one-liner just to show that it can be done. This example loops through the page input elements and then automatically puts a check-mark on the first checkbox that the loop encounters on the page. This hopefully shows you some of the power of using pure JavaScript and also shows that using pure JavaScript is not necessarily all that much more complicated.
The remaining code in the getCheckbox() function splits out the loop and logic into several different lines for legibility. This function gives an example of looping through all of the input element on a Web form, and how to identify form elements that are of a particular type (in this case the checkbox type). Once the function triggers on a checkbox in the loop, an alert is set that outputs the value of the checkbox.
The Example Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function getCheckbox() {
// One-Liner version to loop through each input element and check the first checkbox element
for(x=0;x<document.getElementsByTagName('input').length;x++){if(document.getElementsByTagName('input').item(x).type=='checkbox'){document.getElementsByTagName('input').item(x).checked=true;return true;}};
// loop through each input element and output the value of any checkbox elements
for (x = 0; x < document.getElementsByTagName('input').length; x++) {
if (document.getElementsByTagName('input').item(x).type == 'checkbox') {
alert(document.getElementsByTagName('input').item(x).value);
}
}
}
</script>
</head>
<body onload="getCheckbox();">
<span id="span0">Don't quantify this one</span><input type="text" id="sometext" value="mice" /><br />
<span id="span1">here is checkbox 1:</span> <input type="checkbox" id="randomstuff1" value="cats" /><br />
<span id="span2">here is checkbox 2:</span> <input type="checkbox" id="randomstuff2" value="dogs" />
</body>
</html>
Justin Cooney 