foo bar

How to create Document objects with JavaScript

https://developer.mozilla.org/En/DOM/DocumentFragment Browsers always create document by themselves with empty page (about:blank). According to http://quirksmode.org and MDN, the following browsers support : 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 : The resulting object will be a new document, which can be manipulated just like any other document.

How to create Document objects with JavaScript

Basically that’s the question, how is one supposed to construct a Document object from a string of HTML dynamically in 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 :

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.

Assuming you are trying to create a fully parsed Document object from a string of markup and a content-type you also happen to know (maybe because you got the html from an xmlhttprequest, and thus got the content-type in its Content-Type http header; probably usually text/html ) – it should be this easy:

var doc = (new DOMParser).parseFromString(markup, mime_type); 

in an ideal future world where browser DOMParser implementations are as strong and competent as their document rendering is – maybe that’s a good pipe dream requirement for future HTML6 standards efforts. It turns out no current browsers do, though.

You probably have the easier (but still messy) problem of having a string of html you want to get a fully parsed Document object for. Here is another take on how to do that, which also ought to work in all browsers – first you make a HTML Document object:

var doc = document.implementation.createHTMLDocument(''); 

and then populate it with your html fragment:

doc.open(); doc.write(html); doc.close(); 

Now you should have a fully parsed DOM in doc, which you can run alert(doc.title) on, slice with css selectors like doc.querySelectorAll(‘p’) or ditto XPath using doc.evaluate .

This actually works in modern WebKit browsers like Chrome and Safari (I just tested in Chrome 22 and Safari 6 respectively) – here is an example that takes the current page’s source code, recreates it in a new document variable src , reads out its title, overwrites it with a html quoted version of the same source code and shows the result in an iframe: http://codepen.io/johan/full/KLIeE

Sadly, I don’t think any other contemporary browsers have quite as solid implementations yet.

Per the spec (doc), one may use the createHTMLDocument method of DOMImplementation , accessible via document.implementation as follows:

var doc = document.implementation.createHTMLDocument('My title'); var body = document.createElementNS('http://www.w3.org/1999/xhtml', 'body'); doc.documentElement.appendChild(body); // and so on 

• jsFiddle: http://jsfiddle.net/9Fh7R/
• MDN document for DOMImplementation : https://developer.mozilla.org/en/DOM/document.implementation
• MDN document for DOMImplementation.createHTMLDocument : https://developer.mozilla.org/En/DOM/DOMImplementation.createHTMLDocument

The following works in most common browsers, but not some. This is how simple it should be (but isn’t):

// Fails if UA doesn't support parseFromString for text/html (e.g. IE) function htmlToDoc(markup) < var parser = new DOMParser(); return parser.parseFromString(markup, "text/html"); >var htmlString = "
a div
"; alert(htmlToDoc(htmlString).title); 

To account for user agent vagaries, the following may be better (please note attribution):

/* * DOMParser HTML extension * 2012-02-02 * * By Eli Grey, http://eligrey.com * Public domain. * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK. * * Modified to work with IE 9 by RobG * 2012-08-29 * * Notes: * * 1. Supplied markup should be avalid HTML document with or without HTML tags and * no DOCTYPE (DOCTYPE support can be added, I just didn't do it) * * 2. Host method used where host supports text/html */ /*! @source https://gist.github.com/1129031 */ /*! @source https://developer.mozilla.org/en-US/docs/DOM/DOMParser */ /*global document, DOMParser*/ (function(DOMParser) < "use strict"; var DOMParser_proto; var real_parseFromString; var textHTML; // Flag for text/html support var textXML; // Flag for text/xml support var htmlElInnerHTML; // Flag for support for setting html element's innerHTML // Stop here if DOMParser not defined if (!DOMParser) return; // Firefox, Opera and IE throw errors on unsupported types try < // WebKit returns null on unsupported types textHTML = !!(new DOMParser).parseFromString('', 'text/html'); >catch (er) < textHTML = false; >// If text/html supported, don't need to do anything. if (textHTML) return; // Next try setting innerHTML of a created document // IE 9 and lower will throw an error (can't set innerHTML of its HTML element) try '; htmlElInnerHTML = true; > catch (er) < htmlElInnerHTML = false; >// If if that failed, try text/xml if (!htmlElInnerHTML) < try < textXML = !!(new DOMParser).parseFromString('', 'text/xml'); >catch (er) < textHTML = false; >> // Mess with DOMParser.prototype (less than optimal. ) if one of the above worked // Assume can write to the prototype, if not, make this a stand alone function if (DOMParser.prototype && (htmlElInnerHTML || textXML)) < DOMParser_proto = DOMParser.prototype; real_parseFromString = DOMParser_proto.parseFromString; DOMParser_proto.parseFromString = function (markup, type) < // Only do this if type is text/html if (/^\s*text\/html\s*(?:;|$)/i.test(type)) < var doc, doc_el, first_el; // Use innerHTML if supported if (htmlElInnerHTML) < doc = document.implementation.createHTMLDocument(""); doc_el = doc.documentElement; doc_el.innerHTML = markup; first_el = doc_el.firstElementChild; // Otherwise use XML method >else if (textXML) < // Make sure markup is wrapped in HTML tags // Should probably allow for a DOCTYPE if (!(/^$/i.test(markup))) < markup = '' + markup + ''; > doc = (new DOMParser).parseFromString(markup, 'text/xml'); doc_el = doc.documentElement; first_el = doc_el.firstElementChild; > // RG: I don't understand the point of this, I'll leave it here though // In IE, doc_el is the HTML element and first_el is the HEAD. // // Is this an entire document or a fragment? if (doc_el.childElementCount == 1 && first_el.localName.toLowerCase() == 'html') < doc.replaceChild(first_el, doc_el); >return doc; // If not text/html, send as-is to host method > else < return real_parseFromString.apply(this, arguments); >>; > >(DOMParser)); // Now some test code var htmlString = '
a div
'; var dp = new DOMParser(); var doc = dp.parseFromString(htmlString, 'text/html'); // Treat as an XML document and only use DOM Core methods alert(doc.documentElement.getElementsByTagName('title')[0].childNodes[0].data); 

Don’t be put off by the amount of code, there are a lot of comments, it can be shortened quite a bit but becomes less readable.

Oh, and if the markup is valid XML, life is much simpler:

var stringToXMLDoc = (function(global) < // W3C DOMParser support if (global.DOMParser) < return function (text) < var parser = new global.DOMParser(); return parser.parseFromString(text,"application/xml"); >// MS ActiveXObject support > else < return function (text) < var xmlDoc; // Can't assume support and can't test, so try..catch try < xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.loadXML(text); >catch (e)<> return xmlDoc; > > >(this)); var doc = stringToXMLDoc(''); alert( doc.getElementsByTagName('book')[2].getAttribute('title') ); 

DOMImplementation.createHTMLDocument(), The DOMImplementation.createHTMLDocument() method creates a new HTML Document.

Источник

DOMImplementation: createDocument() method

The DOMImplementation.createDocument() method creates and returns an XMLDocument .

Syntax

createDocument(namespaceURI, qualifiedNameStr) createDocument(namespaceURI, qualifiedNameStr, documentType) 

Parameters

A string containing the namespace URI of the document to be created, or null if the document doesn’t belong to one.

A string containing the qualified name, that is an optional prefix and colon plus the local root element name, of the document to be created.

Is the DocumentType of the document to be created. It defaults to null .

Return value

Examples

const doc = document.implementation.createDocument( "http://www.w3.org/1999/xhtml", "html", null, ); const body = document.createElementNS("http://www.w3.org/1999/xhtml", "body"); body.setAttribute("id", "abc"); doc.documentElement.appendChild(body); alert(doc.getElementById("abc")); // [object HTMLBodyElement] 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

DOMImplementation: createHTMLDocument() method

The DOMImplementation.createHTMLDocument() method creates a new HTML Document .

Syntax

createHTMLDocument() createHTMLDocument(title) 

Parameters

A string containing the title to give the new HTML document.

Return value

Examples

This example creates a new HTML document and inserts it into an in the current document.

Here’s the HTML for this example:

body> p> Click a href="javascript:makeDocument()">herea> to create a new document and insert it below. p> iframe id="theFrame" src="about:blank" /> body> 

The JavaScript implementation of makeDocument() follows:

function makeDocument()  let frame = document.getElementById("theFrame"); let doc = document.implementation.createHTMLDocument("New Document"); let p = doc.createElement("p"); p.textContent = "This is a new paragraph."; try  doc.body.appendChild(p); > catch (e)  console.log(e); > // Copy the new HTML document into the frame let destDocument = frame.contentDocument; let srcNode = doc.documentElement; let newNode = destDocument.importNode(srcNode, true); destDocument.replaceChild(newNode, destDocument.documentElement); > 

The code in lines 4–12 handle creating the new HTML document and inserting some content into it. Line 4 uses createHTMLDocument() to construct a new HTML document whose is «New Document» . Lines 5 and 6 create a new paragraph element with some simple content, and then lines 8–12 handle inserting the new paragraph into the new document.

Line 16 pulls the contentDocument of the frame; this is the document into which we’ll be injecting the new content. The next two lines handle importing the contents of our new document into the new document’s context. Finally, line 20 actually replaces the contents of the frame with the new document’s contents.

The returned document is pre-constructed with the following HTML:

doctype html> html lang="en-US"> head> meta charset="UTF-8" /> title>titletitle> head> body> … body> html> 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник