Javascript : How to create global functions & variables

I would like to开发者_运维知识库 create a new function that I can use on elements, like this:

document.getElementById("element").myNewFunction();

I'm not talking about this:

document.getElementById("element").myNewFunction = function(){
   doSomething...
}

Because this works on that element only, but how should I create global function what I can use on all elements like the ones what are built in to JavaScript?

Use Element's prototype to extend its functionality:

Element.prototype.myNewFunction = function() { 
      // your code...
};

Now you can call this method on any element object.

Edit: I've just had a quick check around, and it appears that this will not work for IE7 and below, and IE8 might be iffy.

Edit 2: Also as Eli points out it's probably not best practice to extend objects you don't own. Given this and shaky IE support you might want to consider a simple procedural function:

function myFunction(element) {
  // your code...

  // which may or may not return an object or value
  return blah;
}

See this question: In Javascript, can you extend the DOM?.

While it is possible to do, its generally considered bad practice to change the functionality of objects you don't own.

Prototype (the library) does this, extends the native (built-in) DomElement class by adding methods to its prototype. It doesn't work in old IEs though so I'd recommend against it.

Try

Object.prototype.myNeweFunction=function(){
 doSomthing..
}

For example:

HTMLAnchorElement.prototype.click = function () {
    alert('HAI!');
};

document.links[0].click();

Figure out right object to extend by querying document.getElementById("element").constructor