Extending HTMLElement

Question

using jQuery it is possible to do something like this: $("div")[5].animate()

This seems to me like the developers in a way extended the HTMLElement using prototype.

My question is now: How did they do this? Since HTMLElement.prototype is not working in IE for example I wonder if there is a cross browser method to prototype HTML elements.

Thanks!

Answer 1

You can't extend those things in IE; IE just does not implement the DOM interface that way. That's why Prototype forces you to "wrap" elements that you want to manipulate with those additional methods.

Answer 2

the jQuery factory function (jQuery() or $()) does not return a DOM node.

The jQuery factory function returns a new jQuery.init instance which acts very similar to an array. Instead of extending any DOM node's prototype, more functions are simply added to jQuery.fn

If a function is chained on a jQuery selector, it typically applies to all the elements contained within the jQuery.init instance.

I highly recommend reading through the commented jQuery source so that you can see exactly what's going on behind-the-scenes.

Answer 3

Note that $('#book') !== document.getElementById('book').
The first one is a jQuery object which refers to a dom element and can be extended, while the second one is actually a dom element.