difference between JS get element's attribute with elem.getAttribute(attr) and elem[attr]

Question

I have a problem to get DOM element's attributes in JS. Here is code:

return elem.getAttribute(attr) || elem[attr] || "";

elem.getAttribute(attr) is used to get attributes like name or id, elem[attr] is used to get attribute like tagName. It works fine, until style came out.

In my case, I want to have "" when style attribute not set. But with above code, it will try elem[attr] when elem.getAttribute(attr) returns null. So if style is not set, I get all browser supported styles instead of "".

How to deal with this problem? Is there any better way than enum attributes?

Edit:

I want to write a general function to get element's attributes (such as name, style) or properties(such as tagName).

Possible duplicate of [.prop() vs .attr()](http://stackoverflow.com/questions/5874652/prop-vs-attr) — Phil, May 05 '16 at 02:19
The above duplicate question refers to jQuery but the answers are the same... `elem.getAttribute(attr)` works with **attributes**, `elem[attr]` works with **properties** — Phil, May 05 '16 at 02:20
can you please concentrate on your problem in order to better formulate your question and try to clarify what do you want to do? I, for instance, am interested only on defined attribute pairs list and want to discard all unsigned ones so that my list of name value pairs of element attributes is short compact clean and easier to manipulate and iterate - what is yours? — Bekim Bacaj, May 05 '16 at 04:39

score 0 · Answer 1 · answered May 05 '16 at 04:23

The main difference is elem.getAttribute(attr) try to get an attribute in the tag element, but elem[attr] try to get a property from an object, is important to know that elem inherits all properties from the Element Object, this properties are declared and in some cases defined, one of this properties is style.

In the particular case of the style property, by default this has been defined with an CSSStyleDeclaration, that's the reason you get attributes of style.

If you want only check if the attribute is in the tag, I suggest you only use this code:

return elem.getAttribute(attr) || "";

Bekim Bacaj · Answer 2 · 2016-05-05T19:21:43.983

This is a code I use on my applications, so I'll just copy & paste it:

Object.defineProperty( Element.prototype, "hashAttr", { get: function(){ 
    /* Bekim Bacaj 2008 */
    var hash=[], i = 0, x = this.attributes; 
        while( x[i] ){hash[x[i].name] = x[i++].value};
    return hash;
}})
;

which is, to my knowledge, the fastest possible.

This is a sample return from an element that has no inline or JavaScript assigned styles on its tag.:

>> media.hashAttr 
 {
    width : "100%",
    height : "100%",
    id : "media",
    src : "http://*****.***/stream/*****.mp4",
    autoplay : "false",
    poster : "http://******.***/thumb/*****.jpg",
    type : "video/mp4"
}

Notice that, therefore, no offline style-attribute is present in the property list.

score 0 · Accepted Answer · answered May 19 '16 at 01:25

I have an answer. It handles tagName specially. It's not great. But it can get the job done.

var value = elem.getAttribute(attr);
if (!value) {
    if (attr == "tagName") {
        value = elem["tagName"] || "";
    } else {
        value = "";
    }
}
return value;

difference between JS get element's attribute with elem.getAttribute(attr) and elem[attr]

3 Answers3