Using getElementsByTagName and getElementsByName

These two methods are best for using W3C DOM methods to quickly retrieve and either peruse or edit multiple elements. In the file we like to call testchangecolorwithgetelementsbyname.html, you'll see how both getElementsByTagName and getElementsByName are specifically designed for fast and efficient dynamic object property changes from JavaScript. The sweetest part of it is, these methods will not only go dig up all the tags with a certain name attribute or tag name, they’ll slap them into convenient arrays for us. Now, that’s service!

Before we continue, we should dispel some of the misinformation in a few books and on the Internet: Contrary to what some have said, there is no legal way to use the name attribute from such tags as div or span, according to the W3C HTML 4.01 specs. You must confine the usage of this attribute to such tags as input, img, frame, iframe, form, map, param, meta, object, A, select, applet, textarea, or button. Those who use XML or XHTML or XFILES or whatever may have different rules to play by (we don’t know or care since we’re confining all our nuggets of wisdom to the four areas we know something about: JavaScript, CSS, HTML, and DHTML).

For the reasons mentioned above, in this web page we’ll be using getElementsByTagName for getting all divs, and getElementsByName for getting all input tags, although we could have used the former method for input tag retrieval too. But we could not have used getElementsByName for div retrieval. Just to be sure, we tried this on both span and div. No go. Now that that’s cleared up, let’s look at the code:

function hue(nextColor){

var e=document.getElementsByName("n");

for(var i=0;i<e.length;i++){e[i].style.backgroundColor = nextColor;}

var e=document.getElementsByTagName("div");

for(var i=0;i<e.length;i++){e[i].style.backgroundColor = nextColor;}

}

The object e is the array of div objects and their properties in the second part of the function above, while all objects (with their properties) named "n" are found in the first part of the function. e[i] is the object array, e.length is the number of array elements, the for loop is incremented through its elements with i++, and e[i].style.backgroundColor = nextColor; is one of the array objects getting one of its style property values changed.

The rest of the code is worth a quick comment or two as well. The gold, coral, and lavender buttons are all CSS div buttons that perform rollovers with the combination of CSS and more CSS and no JavaScript. The first CSS is to style the a and visited link pseudo-classes regulating anything (like a div box) with a link in it to look like a button aching to be pushed. The second CSS is to style the hover link pseudo-class so that the response to being hovered over is to look pushed. Of course, pseudo-classes don’t register mouse clicks, but one could easily make a function wherein the same style changes are effected that are now to be found in the link pseudo-class CSS code, shown below:

a, a:visited {text-decoration: none; color:black; width:100%; height:100%; border:solid 3px; border-color:#cccccc #555555 #555555 #cccccc; display:block;}

a:hover {color:black; width:100%; height:100%; border:solid 3px; border-color:#555555 #cccccc #cccccc #555555; display:block;}

Note that the first CSS code block above refers to all links, and then all visited ones, and it creates borders appropriate to a non-pushed button. The second code block refers to hovered links, and it creates borders appropriate to a pushed button. The display:block rule is for a sometimes clueless Netscape to get a clue.

Next comes the class rules for the cyan, fuchsia, and deeppink buttons that are not depressable and not links and cannot profit from link pseudo-class rules, so these buttons are just given decorative borders. Then the input buttons all get decorated.

.c {border:solid 3px; border-color:slategray;}

input {color:black; background-color:tan;}

Here's the first div button’s code and the wipe() function. Note that one can get away with sticking a name in the div, but to what end? If you find it worth more than an election year promise, contact us and let us know. The only part of each of the six button styles in which we put inline styles rather than embedded is the top property, so that the buttons wouldn’t be on top of each other. The link is designed to do nothing but give us a clicking place, hence the void (do nothing). The onfocus event handler deals with the focus pseudo-class and this has the effect of keeping a link indication box from surrounding the button, which looks crummy. The wipe() function keeps visitors from seeing javascript:void(0) on the status bar when they hover over the button. It’s there twice as that’s what it took to keep the status bar looking right. When you click, the color changes on everything on the page due to the hue() function. When you hover over the button, it depresses.

<div name="m" style="top:53px;"><a href="javascript:void(0)" onfocus="this.blur();wipe()" onMouseOver="wipe(); return true" onClick="hue('gold')">gold (click)</a></div>

function wipe(){window.status= "Look at all the pretty colors!";} //erase status bar or give it a desired message here (between quotes)

The next three buttons aren't designed for depressing. Each has a different event handler type. Observe that you can get away with putting event handlers inside a div tag without using a link anchor:

<div name="m" class="c" style="top:110px;" onMouseOver="javascript:hue('cyan')"><b>cyan</b> (hover)</div>

<div name="m" class="c" style="top:160px;" onClick="javascript:hue('fuchsia')"><b>fuchsia</b> (click)</div>

<div name="m" class="c" style="top:210px;" onDblClick="javascript:hue('deeppink')"><b>deeppink</b> (double-click)</div>

The final two buttons are a bit different. Like the first button, they're depressable, but the link code differs. The # sign is not much of a link, but then we want a do-nothing response. It works fine, first with a clickable button and then with a hoverable button.

<div name="m" style="top:270px;"><a HREF="#" onfocus="this.blur();wipe()" onMouseOver="wipe(); return true" onClick="javascript:hue('coral')">&nbsp;&nbsp;&nbsp;coral (click)&nbsp;&nbsp;&nbsp;</a></div>

<div name="m" style="top:323px;"><a HREF="#" onfocus="this.blur();wipe()" onMouseOver="javascript:hue('lavender')">&nbsp;&nbsp;&nbsp;lavender (hover)&nbsp;&nbsp;&nbsp;</a></div>

The final type of button to inspect is the form input button. You don’t need to submit anything or mess with cgi bins to use forms’ client-side user control tags. Some forms need server-side aid; others don’t. Note the name attribute—which is found on all the input buttons—that allows the getElementsByName("n") method to access the element, even though getElementsByTagName("input") would have also worked. The color parameter we are sending to the function could have been in hex—that would have given us over 16 million choices (not all web-safe).

<INPUT name="n" TYPE="button" VALUE="blue" onClick="hue('blue');"><br>