Question

I’d like to modify the prototype of whatever object is responsible for .getElementById()

I know document does not have a prototype, so what object is .getElementById() actually attached to?

Edit: so turns out document does have a prototype (thanks Kevin). I feel silly.

Answer 1

It is false that document does not have a prototype.

Regarding the getElementById method, I don’t know what specifications have to say, but the location differs between Safari and Firefox, so it should be treated as an implementation detail. Do not rely on the location of the definition. You can always override it directly on document.

That said, I investigated and on Firefox 8.0, the method is defined on document‘s prototype:

◀ Object.getPrototypeOf(document).hasOwnProperty("getElementById")
▶ true
◀ Object.getPrototypeOf(document)
▶ [xpconnect wrapped native prototype]

On Safari (and therefore probably also Chrome and other WebKit derivatives), it is on document‘s prototype’s prototype:

› document.hasOwnProperty("getElementById")
  false
› Object.getPrototypeOf(document).hasOwnProperty("getElementById")
  false
› Object.getPrototypeOf(Object.getPrototypeOf(document)).hasOwnProperty("getElementById")
  true
› Object.getPrototypeOf(document)
  HTMLDocumentPrototype
› Object.getPrototypeOf(Object.getPrototypeOf(document))
  DocumentPrototype 

You can do research of your own using the browsers’ object inspectors to look up the prototype chain, or using Object.getPrototypeOf and hasOwnProperty.

---

To override document.getElementById while keeping the original around, do something like this:

var originalGEID = document.getElementById;
document.getElementById = function (id) {
    ...
    var originalElement = originalGEID.call(document, id);
    ...
};

Note that this operates regardless of where the original method is in the prototype chain.