15

trying to determine a decent, cross browser method for obtaining attributes with javascript? assume javascript library use (jQuery/Mootools/etc.) is not an option.

I've tried the following, but I frequently get "attributes" is null or not an object error when IE tries to use the "else" method. Can anyone assist?

<script type="text/javascript">
//...
    getAttr: function(ele, attr) {
      if (typeof ele.attributes[attr] == 'undefined'){
        return ele.getAttribute(attr);
      } else {
        return ele.attributes[attr].nodeValue;
      }
    },
//...
</script>


<div>
 <a href="http://www.yo.com#foo">Link</a>
</div>

using the above html, in each browser, how do I getAttr(ele, 'href')? (assume selecting the ele node isn't an issue)

Improve this question

3 Answers 3

Reset to default
16

For the vast majority of cases you can simply use the built in getAttribute function.

e.g.

ele.getAttribute(attr)

According to QuirksMode this should work on all major browsers (IE >= 6 included), with a minor exception:

In IE5-7, accessing the style attribute gives an object, and accessing the onclick attribute gives an anonymous function wrapped around the actual content.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

10

With regard to your question's update, you could try this.

It may be overkill, but if getAttribute() and the dot notation don't return a result, it iterates through the attributes object to try to find a match.

Example: http://jsfiddle.net/4ZwNs/

var funcs = {
    getAttr: function(ele, attr) {
        var result = (ele.getAttribute && ele.getAttribute(attr)) || null;
        if( !result ) {
            var attrs = ele.attributes;
            var length = attrs.length;
            for(var i = 0; i < length; i++)
                if(attrs[i].nodeName === attr)
                    result = attrs[i].nodeValue;
        }
        return result;
    }
};

var result = funcs.getAttr(el, 'hash');

It's up to you to do some cross-browser testing, though. :o)

Using ele.attributes, you need to access them by index, as in:

ele.attributes[0].nodeName;   // "id" (for example)
ele.attributes[0].nodeValue;  // "my_id" (for example)

Trying to pass attributes an attribute name appears to return a value whose typeof is object, so your else code is running even though ele.attributes[attr] doesn't give you the value you want.

Improve this answer

15 Comments

I updated the question to be a little more specific. How would I specify that I want the attr "href" or "hash" using your method?
works great in Chrome/FF, testing in IE8, I get: Object doesn't support this property or method on this line: var result = ele.getAttribute(attr) || ele[attr] || null;
eh starting to think it's the selector I'm passing to it causing the issue
Perhaps I'm a little late to chime in here, but I think there is a typo. I think you mean to use attrs[i].nodeName and attrs[i].nodeValue in the loop.
@enigment you're right and also, there's no need to loop if the getAttribute method is present, but the attribute is not set. So I'd change the if condition to be (result !== null && !ele.getAttribute)
|
5

You are trying to access properties of ele before you've established if those properties exist. Try this kind of evidence chain:

if (ele.attributes && ele.attributes[attr] && typeof ele.attributes[attr] == 'undefined')

etc.

Improve this answer

3 Comments

i suppose that will get rid of my error (and thanks), but how say I used my method $.getAttr($anchor, 'href'); how do I get the href from a <a href="#"> in IE6-8?
Sorry, I'm not sure what you're asking.
I updated the bottom of the question to specify what I'm trying to get at (the href of a selected link)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.