The Document() constructor creates a new in-memory Document. Learn how it differs from window.document, how to build detached trees with createElement and appendChild(), when to prefer createHTMLDocument(), and five hands-on examples.
new Document()
Document
none
not the live page
createHTMLDocument
Baseline widely
Every web page has a document object—the live DOM tree the browser parsed from HTML. Sometimes you need a second document in memory: for tests, templates, or building markup before inserting it into the page.
new Document() gives you that blank slate. Nodes you create inside it belong to the new document until you move or copy them elsewhere.
const doc = new Document();
console.log(doc.nodeType); // 9 (DOCUMENT_NODE)
console.log(doc === document); // falsenew Document() does not change what visitors see. It is a sandbox document. To show content, build nodes and attach them to the live page (or serialize the tree as HTML).
Document() ConstructorMDN: the Document() constructor returns a new Document object.
new Document() (no arguments).window.document.doc.createElement, doc.createTextNode, etc.nodeType === 9).doc report ownerDocument === doc.new Document()None.
A new Document object—empty until you add nodes.
new Document() vs window.documentThe global document is the current page. A constructed document is an extra tree you control in JavaScript.
const detached = new Document();
console.log(detached instanceof Document); // true
console.log(detached === document); // false
console.log(detached.nodeType === Node.DOCUMENT_NODE); // true
console.log(document.title); // live page title
console.log(detached.title); // "" until you set itUse document (or window.document) for the visible page. Use new Document() when you need an isolated document for building or testing DOM structures without touching the live tree.
new Document() vs createHTMLDocument()For HTML-shaped trees, document.implementation.createHTMLDocument() is often faster to start with because it already includes <html>, <head>, and <body>.
const blank = new Document();
const htmlDoc = document.implementation.createHTMLDocument("My title");
console.log(blank.documentElement); // null
console.log(htmlDoc.documentElement.tagName); // "HTML"
console.log(htmlDoc.body.tagName); // "BODY"| Goal | Code |
|---|---|
| Create blank document | const doc = new Document() |
| Check node type | doc.nodeType === 9 |
| Create element in doc | doc.createElement("p") |
| HTML skeleton shortcut | document.implementation.createHTMLDocument() |
| Live page document | window.document |
| MDN status | Baseline Widely available (Apr 2018) |
Four facts about new Document().
constructorWeb API
Documentin-memory tree
nonezero parameters
baselineWidely available
Examples follow MDN Document() and common patterns for detached DOM documents.
Create a Document and inspect its type.
new Document()Create an empty in-memory document and read its node type.
const doc = new Document();
console.log(doc.constructor.name);
console.log(doc.nodeType);
console.log(doc.nodeName);
console.log(doc instanceof Document);
console.log(doc.documentElement);nodeType 9 is Node.DOCUMENT_NODE. documentElement is null until a root element is attached.
createElement on a Detached DocumentElements belong to the document that created them.
const doc = new Document();
const p = doc.createElement("p");
p.textContent = "Built off-screen";
console.log(p.ownerDocument === doc);
console.log(p.textContent);
console.log(doc.body); // null — no <body> yetownerDocument links each node to its document. Without a <body>, doc.body stays null even after you create elements.
Contrast with the live page and assemble a mini tree.
window.documentThe live page document and a constructed one are different objects.
const detached = new Document();
console.log(detached === document);
console.log(detached.nodeType === document.nodeType);
console.log(Boolean(document.documentElement));
console.log(detached.documentElement);Both are Document nodes (nodeType 9), but only window.document represents the loaded page and already has a documentElement.
createHTMLDocument()HTML factory gives you a ready-made skeleton.
const blank = new Document();
const htmlDoc = document.implementation.createHTMLDocument("Demo");
console.log(blank.documentElement);
console.log(htmlDoc.documentElement.tagName);
console.log(htmlDoc.title);
console.log(htmlDoc.body !== null);Pick createHTMLDocument when you need head and body immediately. Pick new Document() when you want full control from an empty root.
Assemble html → body → p and read markup.
const doc = new Document();
const html = doc.createElement("html");
const body = doc.createElement("body");
const p = doc.createElement("p");
p.textContent = "Hello from new Document()";
body.appendChild(p);
html.appendChild(body);
doc.appendChild(html);
console.log(doc.documentElement.tagName);
console.log(doc.body.textContent);
console.log(doc.documentElement.outerHTML);After appending html, documentElement and body shortcuts work like on a normal HTML document. See appendChild().
Document without a browser page.ownerDocument ties nodes to a document.new Document vs createHTMLDocument).Engine allocates an empty Document (nodeType 9).
Elements and text nodes belong to this document.
Attach a root element; shortcuts like body may appear.
Serialize, clone, or move nodes into window.document.
document.implementation.createHTMLDocument().The Document() constructor is Baseline Widely available across modern browsers (MDN: since April 2018). Logos use the shared browser-image-sprite.png sprite from this project.
Create in-memory Document objects for detached DOM trees — widely supported in modern browsers.
Bottom line: Use new Document() for blank in-memory documents; use createHTMLDocument() when you need html/head/body immediately; use window.document for the live page.
new Document() creates a blank, in-memory document you can build with standard DOM APIs. It is not the live page—use it when you need an isolated tree or want to learn how documents and ownerDocument relate.
Continue with ownerDocument, appendChild(), nodeType, or the JavaScript hub.
doc.createElement so nodes belong to the right documentcreateHTMLDocument() when you need body immediatelyownerDocument when moving nodes between documentsnew Document() takes no argumentsnew Document() changes the visible pagewindow.documentdoc.body before you create and attach a bodydocument.createElement then append to another doc without adoptingnew Document() is unavailableDocument()In-memory documents for detached DOM work.
new Document()
APInot window.document
ScopeDOCUMENT_NODE
TypecreateElement
DOMwidely available
StatusNodes from different documents cannot always be appended directly. Browsers may require document.importNode() or adoptNode() when moving nodes between new Document() and the live page.
Learn which document owns each node in the DOM tree.
5 people found this page helpful