HTML Element Object vs Object

Question

Can anyone please help me why I couldn't get the right result for this code?

    Javascript:
    var items2 = $("#quadrant1");
    var coords = items2.getAttribute('coords').split(',');

    HTML:
    <map id="square_map" name="square">
        <area id="quadrant1" shape="poly" coords="206,10, 300,10, 388,10"></area>
    </map>

I've checked the typeof of items2 and it's just OBJECT, and doesn't appear to get the right HTML AREA OBJECT. All I'm after is to get the element object so I can do further manipulations like in the example to get its coords attribute value.

How do I know that it should be [object HTMLAreaObject]? I'm not sure really, but that's the typeof "this" in

$('#square_map").bind("click",function(){
var coords = this.getAttribute('coords').split(',');
... });

and it's doing its job properly with that said object. Any help would be appreciated...a lot! Thanks in advance

Answer 1

Because items2 is not DOM Element but jQuery object in your example. Right variant:

var items2 = $("#quadrant1");
var coords = items2.attr('coords').split(',');

or

var items2 = $("#quadrant1");
var coords = items2[0].getAttribute('coords').split(',');

Answer 2

If you need to get the original DOM Object use $('#quadrant1').get() . To implement its functionality jQuery uses it's own Objects, but always you can get a reference to the original DOM Object, as I mentioned above.