Accessing the name attribute of a DIV
Snippet Menu
-10
Tue. Oct. 17th, 2006 3:25 PM
One way to group elements in HTML is to assign them a name attribute. Multiple elements can share a name, then you can easily access them as an array using the getElementsByName() method.
The problem is that some DOM parsers aren't keen on, or are ignorant to, this use of the name attribute, so a simple object.name returns undefined. In my case, it was a DIV in Firefox 1.5 that was behaving this way.
There is a simple work around for this that works in Firefox, I haven't tested it in others. It is to use the getAttribute method that is an extension of any element object.
This ability can be useful if you have a function that performs a transformation on the active element, and another transformation on closely related elements.
The problem is that some DOM parsers aren't keen on, or are ignorant to, this use of the name attribute, so a simple object.name returns undefined. In my case, it was a DIV in Firefox 1.5 that was behaving this way.
There is a simple work around for this that works in Firefox, I haven't tested it in others. It is to use the getAttribute method that is an extension of any element object.
This ability can be useful if you have a function that performs a transformation on the active element, and another transformation on closely related elements.
<div id="one" name="some_div" onclick="meFirst(this);">
Click me!
</div>
<div id="two" name="some_div" onclick="meFirst(this);">
Click me!
</div>
<div id="three" name="some_div" onclick="meFirst(this);">
Click me!
</div>
function meFirst(object) {
activeDiv = object.id
divGroup = object.getAttribute("name")
allMyDivs = document.getElementsByName(divGroup);
for(i=0; i < allMyDivs.length; i++ ) {
var newContent = "";
if( allMyDivs[i].id == activeDiv ) {
newContent = "I rule!!";
} else {
newContent = "Click me next!!";
}
allMyDivs[i].innerHTML = newContent;
}
}
Votes Up
Votes Down
I also cleaned up some missing semicolons because I've been coding in Ruby all day.
document.getElementsByNameIE = function(tagName,elementName) {
matchingTags = document.getElementsByTagName(tagName);
elementList = new Array;
for(i=0; i < matchingTags.length; i++) {
if( matchingTags[i].name == elementName ) {
elementList.push(matchingTags[i]);
}
}
return elementList;
}
function meFirst(object) {
activeDiv = object.id;
divGroup = object.getAttribute("name");
allMyDivs = document.getElementsByName(divGroup);
if( allMyDivs.length == 0 ) {
allMyDivs = document.getElementsByNameIE("div",divGroup);
}
for(i=0; i < allMyDivs.length; i++ ) {
var newContent = "";
if( allMyDivs[i].id == activeDiv ) {
newContent = "I rule!!";
} else {
newContent = "Click me next!!";
}
allMyDivs[i].innerHTML = newContent;
}
}
I can now see how this could be redone with classes. Not sure it makes this bad code, but hey.
According to the HTML 4.01 spec, the only elements that support NAME attributes are BUTTON, TEXTAREA, APPLET, SELECT, FORM, FRAME, IFRAME, IMG, A, INPUT, OBJECT, MAP, PARAM and META. So to place a NAME inside a DIV is actually invalid HTML.