when i create a “input” form control without specifying the type, it defaults to type=”text”. your current script is not able to work with this “lazy” coding

I’m not sure if this is the right function, or if getElementByClass is better, but in either case I’m having a hard time returning the ID of that single element.

Any thoughts? Much appreciated …

No problem at all! I hope everything works out for you.

-mk

Interesting. However, the way I see it, style isn’t really an attribute in that sense. You never set a style through setAttribute, but instead by using the .style notation.

If your code works in your case, I’m happy for you, but I don’t find it necessary to incorporate in the standard version of the script.

A little suggestion: Instead of checking for web browser name, you can use if(document.all) and then a check for if(typeof oAttribute.cssText != "undefined).

if (navigator.appName == 'Microsoft Internet Explorer')
{
oAttribute = oAttribute.cssText;
}


Due to the way IE works, when trying to get the ’style’ attribute, IE’s getAttribute function returns an object.

The work around I found was to set the oAttribute variable using the .cssText property for IE. I believe that the ’style’ attribute is the only attribute stored as an object in IE. I could be wrong though…

My modification to your function:


/*
Copyright Robert Nyman, http://www.robertnyman.com
Free to use if this text is included
*/
function getElementsByAttribute(oElm, strTagName, strAttributeName, strAttributeValue){
var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
var oAttributeValue = (typeof strAttributeValue != "undefined")? new RegExp("(^|\\s)" + strAttributeValue + "(\\s|$)") : null;
var oCurrent;
var oAttribute;
for(var i=0; iif(typeof oAttribute == "object"){
oAttribute = oAttribute.cssText;
}
if(typeof oAttribute == "string" && oAttribute.length > 0){
if(typeof strAttributeValue == "undefined" || (oAttributeValue && oAttributeValue.test(oAttribute))){
arrReturnElements.push(oCurrent);
}
}
}
return arrReturnElements;
}


However, it seems that the attribute ’style’ does not get returned in IE. I’ve tested in other browsers and the ’style’ attribute is found, but IE, the array is returned empty.

Any thoughts on how to make this work?

Weird… I use it all the time and haven’t ahd any problems with IE 6. For example, with my GLT library it’s vital.

/hbi

Unfortunately, I don’t have an answer for you. I never get time nor assigned to play around with such fun stuff!

In Firefox, scopeName does not exist at all (but I have extended as seen below) and nodeName returns both the namespace and the nodeName, united by a colon…in upperCase.

Node.prototype.__defineGetter__(’scopeName’, function() {
var nn = this.nodeName.toString();
return (nn.indexOf(‘:’) > -1)? nn.split(‘:’)[0].toLowerCase() : ‘HTML’ ;
});

I find the Firefox interface poor and limiting. But than again, I might be missing out on something…so I hope you shed some light to the subject. Do you know any way to extract the properties of an element in a suitable way in Firefox?

BR,
/hbi

I didn’t know that. My guess is that it is probably intentional by Firefox since they want to be as valid and correct as possible, and custom attributes shouldn’t be in the HTML code (this is a big discussion for another day… ) and aren’t allowed if you want to have a web page with valid code (unless you use a custom DTD and so on).

Anyway, with that said, if you have that specific need for custom attributes I’m happy to hear that your workaround seems to work out fine for you. However, I will let this function hold on to the W3C recommended way of accessing attributes in the DOM.

I haven’t done extensive testing on this, but I seem to have stumbled across a problem with custom attributes.

I have following element:

<input type="button" foo="bar" value="initValue"/>

If I call your function as follows:

var buttons = getElementsByAttribute(document.body, 'input', 'foo', 'bar');

I get null result in Firefox 1.5.0.4 (it’s ok on IE6).
By changing your line:

oAttribute = oCurrent.getAttribute(strAttributeName);

to instead use eval() to do direct property access:

oAttribute = eval('oCurrent.'+strAttributeName);

it seems to work ok on both Firefox and IE6. I’m assuming there is no intentional restriction in getAttribute function with regards to custom attributes, and that this is just a bug in Firefox Element::getAttribute.
Thanks for your function!

thanks.