How can I extend the document object?

Question

I'm currently trying to get a better understanding of JavaScript and prototyping.

I wanted to add a function to the document but prototype is undefined on document.

This code:

document.prototype.writeLine = function(text){
    this.write(text);
    this.write("<br />");  
};

Generates this error:

// In FireFox
TypeError: document.prototype is undefined

// In Chrome
Uncaught TypeError: Cannot set property 'writeLine' of undefined

How can I extend the document object to be able to call something similar to document.WriteLine('MyText') ?

Here is the Fiddle I'm working with.

Since there's only one `document` on a page, you could just add the function directly: `document.writeLine = function(text) {...}` This way you don't need to worry about variations in the DOM implementation. — I Hate Lazy, Oct 02 '12 at 12:02
@user1689607: Wow, this works brilliantly in FF as well as Chrome. Nice. that makes sense, if there is only ever a single document object prototype would not be needed. I never though of that. Thank you. — Nope, Oct 02 '12 at 12:04

score 9 · Accepted Answer · edited Jul 29 '21 at 19:33

9

I updated your fiddle. The problem you were having is that document object is an instance of the HTMLDocument object type. The instance itself doesn't have a prototype, however the HTMLDocument does.

Update: Here is a snippet which works in IE9 because under IE9 HTMLDocument is undefined.

if (typeof HTMLDocument !== 'undefined') {
    HTMLDocument.prototype.writeLine = function(text){
        this.write(text);
        this.write("<br />");  
    };
} else {
    Document.prototype.writeLine = function(text){
        this.write(text);
        this.write("<br />");  
    };
}

document.writeLine("Line 1");
document.writeLine("Line 2");

edited Jul 29 '21 at 19:33

S.Serpooshan

7,608
4
33
61

answered Oct 02 '12 at 11:58

Konstantin Dinev

34,219
14
75
100

Nice. Is there a reason though why `document.writeLine("Line 2");` creates error: `TypeError: document.writeLine is not a function`? However, the first call to `document.writeLine` works. – Nope Oct 02 '12 at 12:00
@FrançoisWahl what browser are you trying this under? It works for me nicely in webkit. – Konstantin Dinev Oct 02 '12 at 12:01
It only does that in FireFox. I will accept your answer as it solved my issue. that the second line fails to execute in FireFox seems to be specific to FF. Thank you for the quick response. – Nope Oct 02 '12 at 12:03
As `user1689607` mentioned in the comment on the question, just using `document.writeLine` works as well. I never thought of `prototype` not being realy needed as only a single instance of `document' exists. – Nope Oct 02 '12 at 12:09
@FrançoisWahl: It breaks in firefox because you're using `document.write` after the DOM is loaded, which wipes out the `document` element. [Here's an update](http://jsfiddle.net/qpZ6K/3/) that runs the code in the `head` instead of `onload`, so that the writing takes place while the document is still loading. – I Hate Lazy Oct 02 '12 at 12:09
@user1689607: That's realy good information. I'm going to accept this answer as it has addressed my initial issue. You have not added an yourself but added valuable information on the question and this post. Thank you. – Nope Oct 02 '12 at 12:13
@FrançoisWahl I updated with a new fiddle which works under IE9 as well. – Konstantin Dinev Oct 02 '12 at 12:14
@KonstantinD-Infragistics: Thankyou so much for the fiddles, I will be adding them to my fiddle dashboard for future references :) – Nope Oct 02 '12 at 12:16

score 1 · Answer 2 · edited May 23 '17 at 10:29

The problem is that document is of type object and not function. In JavaScript you use functions as constructors like this:

function MyClass() {
    this.myProperty = "something";
}

You may create an instance of MyClass as follows:

var myInstance = new MyClass;
alert(myInstance.myProperty);

Every function also has a property called prototype which is an object. All the properties of the prototype are inherited my instances of the constructor function:

MyClass.prototype.displayProperty = function () {
    alert(this.myProperty);
};

myInstance.displayProperty();

In your case since document is the instance of a constructor and not the constructor itself, there's no property called prototype on it.

For more information about inheritance in JavaScript read this answer.

score 1 · Answer 3 · answered Jun 29 '18 at 10:08

is very easy, document and Document are both different, document is the document of the window and Document is the interface of the document (thats comone from DOM), if your like add a new prototype for you use in your document you need add this but into Document like this:
window.Document.prototype.Sayhi = "Hello World" or Document.prototype.Sayhi = "Hello World" and now you can call this from you document like document.sayhi thats happen because you need Set the prototype on Interfaces if you like for example add a new prototype in your Object window your need Set it at Window interface like: Window.prototype.Saybye = "Bye Bro See You Later" and you can call the prototype in you window.Saybye remember, Window is an interface that contain window like Document and document****

(This post does not seem to provide a [quality answer](https://stackoverflow.com/help/how-to-answer) to the question. Please either edit your answer, or just post it as a comment to the question). — sɐunıɔןɐqɐp, Jun 29 '18 at 10:26

How can I extend the document object?

3 Answers3

Linked