Element.has() and a cross-browsable "hasAttribute"

[ibolmo]

(from Lighthouse)

Hi,

The other day I was stuck in one of those moments where doing something simple is strangely complicated (thanks IE <3). I ran into a situation where I must validate if an element property has been set, and I thought "oh, I'll just use my_element.has('someattribute')" and to my surprise there was no such thing.

Since hasAttribute is not available for older versions of IE, I started browsing through the MooTools code and I found something that looks like a possible implementation: https://github.com/mootools/mootools-core/blob/master/Source/Slick/...

Testing for it in IE7 (IE9 in IE7 mode) and IE6 (with Chrome IE Tab extension) it seems to work without problem.

I think the Element "class" could use a has method since the get method could be considered ambiguous for this purpose as it returns
null for when the attribute does not exist and for when it is empty (which IMHO should return an empty string).

Regards,

David

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[MrPrime]

great news, It's better to provide has method for Element. Then I just went through the source code of getProperty method, I did a little change as follows.

getProperty: function(name){
    var getter = propertyGetters[name.toLowerCase()];
    if (getter) return getter(this);

    return Slick.hasAttribute(this, name) ? 
            Slick.getAttribute(this, name) : null;

    /* var result = Slick.getAttribute(this, name);
    return (!result && !Slick.hasAttribute(this, name)) ? null : result; */
}

apparently, if result is an empty string, !result will be converted to true, it will always return null, and another thing is that why we try to get the value of attribute first, then check whether it exists ?So I did that small change. developer can use === or !== to check whether the attribute exists or not.
html:

<div id="demo" data-test>

javascript:

if( $('demo').get('data-test') !== null) {
  // then do something...
}

but it seems not elegant, so providing has methed is much better.

[gonchuki]

.get of an attribute that has no value but exists should definitely be returning an empty string, that's what the browser returns if you do:

var a = document.createElement('div');
var b = document.createAttribute('data-test');
a.setAttributeNode(b);

doing a.getAttribute('data-test') returns an empty string, while a.get('data-test') returns null