Comment créer des objets de Document avec JavaScript

Il y a deux méthodes définies dans les spécifications, createDocument de DOM de Base Niveau 2 et createHTMLDocument de HTML5. L'ancien crée un document XML (y compris XHTML), la création d'un document HTML. Résident tous les deux, comme des fonctions, sur la DOMImplementation interface.

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

En réalité, ces méthodes sont plutôt jeunes et mis en œuvre seulement dans les dernières versions de navigateur. Selon http://quirksmode.org et MDN, les navigateurs suivants soutien createHTMLDocument:

• Chrome 4
• Opera 10
• Firefox 4
• Internet Explorer 9
• Safari 4

Assez intéressant, vous pouvez (genre de) créer un document HTML dans les anciennes versions d'Internet Explorer, à l'aide ActiveXObject:

var htmlDoc = new ActiveXObject("htmlfile");

L'objet résultant sera un nouveau document, qui peut être manipulé comme tout autre document.

Par la spec (doc), on peut utiliser le createHTMLDocument méthode de DOMImplementation, accessible via document.implementation comme suit:

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 pour DOMImplementation: https://developer.mozilla.org/en/DOM/document.implementation
• MDN document pour DOMImplementation.createHTMLDocument: https://developer.mozilla.org/En/DOM/DOMImplementation.createHTMLDocument

Les ouvrages suivants, dans la plupart des navigateurs les plus courants, mais pas certains. C'est comment de simples il devrait être (mais n'est-ce pas):

//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 = "<title>foo bar</title><div>a div</div>";
alert(htmlToDoc(htmlString).title);

Pour tenir compte de l'agent utilisateur aléas, les éléments suivants peuvent être mieux (veuillez noter que l'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 {
var doc = document.implementation.createHTMLDocument('');
doc.documentElement.innerHTML = '<title></title><div></div>';
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 (!(/^<html.*html>$/i.test(markup))) {
markup = '<html>' + markup + '<\/html>'; 
}
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 = '<html><head><title>foo bar</title></head><body><div>a div</div></body></html>';
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);

Ne soyez pas rebutés par la quantité de code, il y a beaucoup de commentaires, il peut être raccourcie un peu, mais devient de moins en moins lisible.

Oh, et si le balisage est valide XML, la vie est beaucoup plus simple:

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('<books><book title="foo"/><book title="bar"/><book title="baz"/></books>');
alert(
doc.getElementsByTagName('book')[2].getAttribute('title')
);