CODEWITHSUNDEEP
javascriptjqueryhtmlattributes
NDavis
NDavis

Reputation: 1227

hasAttribute vs hasOwnProperty

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?

Upvotes: 9

Views: 8007

Answers (2)

Ian Ramos
Ian Ramos

Reputation: 414

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.

Upvotes: 15

Paulo M
Paulo M

Reputation: 1

HTML:

<span medium-img>Whatever</span>

Javascript:

alert($('span').is('[medium-img]')); // Alerts true

Upvotes: -1

Related Questions