output all set attributes of an element

Question

I have a jquery object which represents a input button element on the page. How can I with jquery to output via console.log all properties/attributes of this element?

score 13 · Accepted Answer · answered Dec 01 '10 at 05:22

Assuming the HTML of the page is

<body>
  <img id="smile" class="big" alt="smile" madeupattribute="yep" src="http://mikegrace.s3.amazonaws.com/forums/stack-overflow/smile.png"/>
</body>

you could do

var domElement = $("img")[0] // [0] returns the first DOM element that jQuery found
$(domElement.attributes).each(function(index, attribute) {
  console.log("Attribute:"+attribute.nodeName+" | Value:"+attribute.nodeValue);
});

Example page => http://mikegrace.s3.amazonaws.com/forums/stack-overflow/example-get-element-attributes-jquery.html

Example page console output

alt text

casablanca · Answer 2 · 2010-12-01T01:28:46.090

If you want just HTML attributes:

var e = document.getElementById('my_input');
for (var x in e)
  if (e.hasAttribute(x))
    console.log(x);

If you want all properties that can be retrieved/set via JavaScript:

var e = document.getElementById('my_input');
for (var x in e)
  if (typeof e[x] != 'function')
    console.log(x);

Example on JSBin -- for some reason, Firefox fails halfway through the "all properties" list when trying to compute typeof e['selectionStart'].

output all set attributes of an element

2 Answers2