What is the difference between Document and document in JavaScript?

by

What is the difference between Document and document?

document (or window.document) is a reference to the document contained in the window. (spec)

Document is the DOM interface for documents, which is exposed on the global object. (spec, spec)

How does one use Document (as it is not a function, therefore, not constructable)?

It’s a host object and does not need to follow the EcmaScript spec – yet that does not mean it’s not a function. It may differ from browser to browser as well. Yet it is not intended to be called (if you try it you’ll get a NOT_SUPPORTED_ERR), there are other methods to instantiate/obtain new documents. What you can still use it for is

> document instanceof Document
true
> Document.prototype
DocumentPrototype {
    adoptNode: Function
    constructor: Document
    createAttribute: Function
    …
    querySelector: Function
    querySelectorAll: Function
}
|- NodePrototype
|- Object

so you could extend its prototype and use those methods on all XMLDocuments/HTMLDocuments in your app (but only if you know what’s wrong with extending the DOM).

Most importantly, what is the harm in “monkey-patching” Document to make it constructable?

I’m not sure how you would do that. Overwriting it could harm every script that expects it to work as above (unless you fix the prototype property of your new function). And maybe the Document property of window is non-writable in some environments, so you could harm yourself.

More Related Contents:

  1. How to pass arguments to addEventListener listener function?
  2. Remove all child elements of a DOM node in JavaScript
  3. Changing website favicon dynamically
  4. Dynamically set value of a file input [duplicate]
  5. What is the difference between children and childNodes in JavaScript?
  6. How to append text to a “?
  7. Setting innerHTML vs. setting value with Javascript
  8. What is my script src URL?
  9. javascript access parent DOM across domains?
  10. How to add/remove a class in JavaScript?
  11. jQuery: how to change tag name?
  12. Why is the loop assigning a reference of the last index element to? [duplicate]
  13. Get the string representation of a DOM node
  14. How can I remove all CSS classes using jQuery/JavaScript?
  15. Count immediate child div elements using jQuery
  16. Add elements to the DOM given plain text HTML using only pure JavaScript (no jQuery)
  17. How to fill in form field, and submit, using javascript?
  18. Is it possible to use HTML’s .querySelector() to select by xlink attribute in an SVG?
  19. event.toElement in IE8 and Firefox?
  20. Convert String to XML Document in JavaScript
  21. Why doesn’t Node.js have a native DOM?
  22. How to append a childnode to a specific position
  23. Simple way to get element by id within a div tag?
  24. How can I detect a Scrollbar presence ( using Javascript ) in HTML iFrame?
  25. How to get element by class name
  26. Load javascript async, then check DOM loaded before executing callback
  27. How to do a wildcard element name match with “querySelector()” or “querySelectorAll()” in JavaScript?
  28. How to check null objects in jQuery
  29. Getting width & height of an image with filereader
  30. Manually dispatchEvent DOMContentLoaded

Leave a Comment