CODEWITHSUNDEEP
javascriptprototypejs
user2155362
user2155362

Reputation: 1703

Prototype.js & document.createElement()

all I'm learning prototype.js now. There's something look strange. For example, below is the code fragment I run in firebug, the url is http://api.prototypejs.org/dom/Element/, because there is prototype.js in the page.

var el2 = document.createElement('div');
var k=0;
for(var i in el2){ k++};
console.log(k);

The result is 262, it is very very strange. Because if I run the same code in a page without prototype.js, the result is 195. My question is how prototype.js affect the document.createElement method. I query document.createElement in prototype.js, I cannot find any code like document.createElement=function(){}.

thanks!

Upvotes: 3

Views: 1867

Answers (4)

user2155362
user2155362

Reputation: 1703

Thanks for all, I think I know how protytype.js do native extentions. 

(function(div) {

if (!Prototype.BrowserFeatures.ElementExtensions && div['__proto__']) {
    window.HTMLElement = { };
    window.HTMLElement.prototype = div['__proto__'];
    Prototype.BrowserFeatures.ElementExtensions = true;
}

div = null;})(document.createElement('div'));

I think this is code fragment which do native extentions.

Upvotes: 0

Geek Num 88
Geek Num 88

Reputation: 5312

According to the code you posted you are looping through the element object and counting the number of properties on that element object.

As other posters have noted PrototypeJS adds additional methods and properties to the native Javascript definition of the HTMLElement.

Please take a look at the Element namespace http://api.prototypejs.org/dom/Element/ which lists all the methods and properties that PrototypeJS adds.

EDIT with more information

How does PrototypeJS add new methods to an element?

Firstly you need to understand how a javascript prototype works - the easiest definition is it is a blueprint for building an object, and when a new object of that type is created that object has all the methods defined in that blueprint as well as any further up the prototype chain.

Easiest example of a prototype chain

 DIVElement -> HTMLElement -> Object

So a new div element gets all the methods of DIVElement prototype, HTMLElement prototype, and Object prototype.

This is also why it is not advisable to extend the Object prototype because everything copies from that prototype.

So then PrototypeJS extends the HTMLElement.prototype object with new methods that do not exist natively in most browsers so that whenever a new HTML element is created in javascript it gets copies of the PrototypeJS methods.

For a specific place in the source code 

Object.extend(GLOBAL.Element, {
  extend:     extend,
  addMethods: addMethods
});

This is at the end of many feature detections to see what elements the browser supports etc.

Upvotes: 1

hereandnow78
hereandnow78

Reputation: 14434

document.createElement is just creating an HTMLElement which is extended by prototype.js. See http://prototypejs.org/learn/extensions.html for more information.

Upvotes: 1

Ry-
Ry-

Reputation: 225085

Prototype affects the prototype of HTMLElement, which document.createElement creates — hence the name. Here’s the Prototype documentation on that.

Native extensions

There is a secret behind all this.

In browsers that support adding methods to prototype of native objects such as HTMLElement all DOM extensions on the element are available by default without ever having to call Element.extend(), dollar function or anything!

Upvotes: 2

Related Questions