hasAttribute vs hasOwnProperty

Question

I ran into some jquery code which attempts to use hasOwnProperty to access an html attribute.

<input type="text" name="fname" placeholder="First name">

<script>
    var e = $element.find('input')[0];
    if(!e.hasOwnProperty("placeholder")){...}
</script>

To my understanding, this should always be

if(!e.hasAttribute("placeholder")){...}

but what is the difference between hasAttribute and hasOwnProperty? Are they ever equivalent?

Answer 1

hasAttribute()

hasAttribute() works only for html elements and returns true if that element has the same attribute name as the given argument.

<div class="myClass"></div>

<script>
    document.querySelector('div').hasAttribute('class'); //true
    document.querySelector('div').hasOwnProperty('class'); //false
</script>

hasOwnProperty()

hasOwnProperty() works only for JavaScript objects and returns true if that object has a property with the same name as the given argument.

var obj = {
    myProp: "my attribute"
}

obj.hasOwnProperty("myProp") //true
obj.hasAttribute("myProp") //false

Some html elements can be constructed inside javascript, thats why hasOwnProperty works sometimes for it, but hasAttribute never works for javascript objects.