Extending HTMLElement

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 c开发者_开发知识库ross browser method to prototype HTML elements.

Thanks!

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.

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.

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.