<div> elements that each have a name attribute. The getElementsByName('name_one') returns the two nodes where tha attribute value is name_one. These are assigned to the variable node_list and then, the found elements are iterated over with the JavaScript for statement. In the iteration body, the content of these divs is changed with the innerHTML property. <!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>document.getElementsByName</title>
<style type="text/css">
div {
height: 20px;
width: 300px;
margin: 5px;
border: #ffbbaa 1px solid;
}
</style>
<script type="text/javascript">
function main() {
try {
var node_list = document.getElementsByName('name_one');
for (var i = 0; i<node_list.length; i++) {
node_list[i].innerHTML = "This node matches the name <b>name_one</b>";
};
} catch(e) {alert (e);}
}
</script>
</head>
<body onload='main();'>
<div name="name_one">ABC</div>
<div name="name_two">DEF</div>
<div name="name_one">GHI</div>
<div name="name_two">JKL</div>
</body>
</html>
document.getElementById('…') returns the (single) element, if it exists, whose attribute id has a given value. document.getElementsByTagName('div') returns an array of the <div> elements in a HTML document.