Get attributes in javascript

Question

I get an element by id, and I would like to know all attributes of the object.

I've using alerts for all this kind of stuff, is that the way its done in javascript? In AS3 or whatever, I would place a break point, and investigate the object in the variables panel.

Second, if that is the way its done, how can I show ALL attributes, if I don't know what they are in advance, and show them in alert boxes? Using jquery 1.5. Thanks

What is this for? Is your real problem that you need a debugger? — outis
– outis, Commented Jan 25, 2012 at 1:04

user1106925 · Accepted Answer · 2012-01-25 01:13:46Z

3

If by "attributes", you mean the "properties" of the DOM node, then use...

console.dir(element);

...in Chrome's developer tools, or Firebug for Firefox.

This will allow you to expand the Object and fully inspect all of its properties, including the .attributes property.

answered Jan 25, 2012 at 1:13

user1106925

Sign up to request clarification or add additional context in comments.

6 Comments

user1106925 Over a year ago

@katspaugh: Yes it does, but dir is meant specifically for object property inspection.

katspaugh Over a year ago

Indeed, much better than log!

dt1000 Over a year ago

Ok, really helpful for future debugging. Thank you! So then, a question on select tags. Below is my code, this is a select object. 'value' shows up as a property in the console as I would expect, and yet my alert box shows 'undefined'. Any ideas? Thanks typeModuleId = $("#typeModuleId") alert(typeModuleId.value) console.dir(typeModuleId); debugger;

user1106925 Over a year ago

@dt1000: It's because $("#typeModuleId") returns a jQuery object, not a DOM element. To access the DOM element, do $("#typeModuleId")[0].value. Or you could use jQuery's .val() method. $("#typeModuleId").val().

dt1000 Over a year ago

Worked! Thanks. Sorry for all the questions, so is that returning an array of jquery objects? So that is why I have to dig down to the first element? Thanks!

|

Alex Wayne · Accepted Answer · 2012-01-25 01:14:28Z

2

Debugging with alerts will slowly drain your soul out through your nose. Luckily, there is a better way.

The Javascript console in a modern browser (like Chrome or Safari, or with the Firefox extension Firebug) is awesome.

console.log

You can also set breakpoints in the script tab, or from the code via the debugger statement. You can inspect globals and local variables in the scripts tab as well. It's seriously awesome.

Checkout the chrome dev tools videos for way more awesome: http://code.google.com/chrome/devtools/docs/videos.html

edited Jan 25, 2012 at 1:14

answered Jan 25, 2012 at 1:07

Alex Wayne

188k52 gold badges328 silver badges363 bronze badges

Comments

katspaugh · Accepted Answer · 2012-01-25 01:17:44Z

1

You have a few options:

console.log(domElement);

That'll let you log statements and view the item as it exists after your script runs. Note though that Firebug treats the object as live, so changes to the object reflect in your log statement (you'll see the actual object in your log, not just a bunch of strings) at least, it did the last time I used it).

debugger;

That'll let you pause execution and analyze your object via watch window in Firebug or Chrome dev tools, or even in IE9's developer tools.

edited Jan 25, 2012 at 1:17

katspaugh

18k12 gold badges69 silver badges107 bronze badges

answered Jan 25, 2012 at 1:06

Jerod Venema

44.7k5 gold badges70 silver badges109 bronze badges

1 Comment

katspaugh Over a year ago

Note, that Console API provides many methods besides log.

Collectives™ on Stack Overflow

Get attributes in javascript

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related