How to Create Document Objects with JavaScript

How to create Document objects with JavaScript

There are two methods defined in specifications, createDocument from DOM Core Level 2 and createHTMLDocument from HTML5. The former creates an XML document (including XHTML), the latter creates a HTML document. Both reside, as functions, on the DOMImplementation interface.

var impl    = document.implementation,
    xmlDoc  = impl.createDocument(namespaceURI, qualifiedNameStr, documentType),
    htmlDoc = impl.createHTMLDocument(title);

In reality, these methods are rather young and only implemented in recent browser releases. According to http://quirksmode.org and MDN, the following browsers support createHTMLDocument:

Chrome 4
Opera 10
Firefox 4
Internet Explorer 9
Safari 4

Interestingly enough, you can (kind of) create a HTML document in older versions of Internet Explorer, using ActiveXObject:

var htmlDoc = new ActiveXObject("htmlfile");

The resulting object will be a new document, which can be manipulated just like any other document.

Javascript - I want to create a Document object from a link (string)

Initially you need to get html through AJAX request after use DOMParser.

var parser = new DOMParser();
var doc = parser.parseFromString("<html_string>", "text/html");

var doctype = document.implementation.createDocumentType(
    'html',
    '-//W3C//DTD XHTML 1.0 Strict//EN',
    'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'
);

var dom = document.implementation.createDocument(
    'http://www.w3.org/1999/xhtml',
    'html',
    doctype
);

 // assign the body of your page, after you can use dom variable.
dom.documentElement.innerHTML = '<head></head><body></body>';

Create a new Document object with custom URL

When you query those href properties you are actually getting their values to be relative paths that get evaluated to different absolute urls according to the context they are running. Since it would be crazy to walk through the entire dom and change that, I might suggest the opportunity to inject a base html element that will hint the basepath any relative url will be mapped to. It could quickly solve your specific problem.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

The <base> HTML element specifies the base URL to use for all relative
URLs in a document. There can be only one <base> element in a
document.

The condition must be that all those relative urls map to the same baseurl of course but that's for granted if you are grabbing the page from a working landing page url. Be warned that there are some constraints bound to CORS policies especially if the js on those pages will need to perform ajax queries to that domain. What I mean is that such solution doesn't gift you the keys to any possible scenario.

<base href="https://thereal.com/absolute/url">

Another interesting reading about the baseURI property from MDN:

The read-only baseURI property of the Node interface returns the
absolute base URL of the document containing the node.
The base URL is used to resolve relative URLs when the browser needs
to obtain an absolute URL, for example when processing the HTML
element's src attribute or the xlink:href or href attributes in SVG.
Although this property is read-only, its value is determined by an
algorithm each time the property is accessed, and may change if the
conditions changed.
The base URL is determined as follows:
By default, the base URL is the location of the document (as determined by window.location).
If it is an HTML Document and there is a <base> element in the document, the hrefvalue of the first Base element with such an

attribute is used instead.

How to create a HTML document DOM object from code?

Okay, after reading the docs I noticed createHTMLDocument() does not create a zero byte-length document object but a basic HTML scaffolding like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Wrong title</title>
  </head>
  <body></body>
</html>

That's why newdoc.write() does not work as expected.

Instead, I can just take the html element and change its HTML code (corrected fiddle).

var newdoc = document.implementation.createHTMLDocument("Wrong title");
newdoc.documentElement.innerHTML = '\
   <!doctype html>\
   <html>\
     <head>\
       <title>Right title</title>\
     </head>\
     <body>\
       <div id="a_div">Right content</div>\
     </body>\
   </html>';

How to Create Document Objects with JavaScript