So erstellen Sie Dokumentobjekte mit JavaScript

Gibt es zwei Methoden definiert, die in Spezifikationen, createDocument von DOM Core Level 2 und createHTMLDocument von HTML5. Erstere erstellt ein XML-Dokument (einschließlich XHTML), letzteres erstellt ein HTML-Dokument. Beide befinden sich, wie Funktionen, auf die DOMImplementation - Schnittstelle.

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

In der Realität, diese Methoden sind relativ jung und erst in den letzten browser-Versionen. Nach http://quirksmode.org und MDNdie folgenden Browser unterstützen createHTMLDocument:

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

Interessant genug, können Sie (Art von) erstellen Sie ein HTML-Dokument bei älteren Versionen von Internet Explorer, mit ActiveXObject:

var htmlDoc = new ActiveXObject("htmlfile");

Das resultierende Objekt wird ein neues Dokument, die bearbeitet werden können wie jedes andere Dokument.

InformationsquelleAutor der Antwort Andy E

Pro spec (doc), kann man mit der createHTMLDocument Methode der DOMImplementationerreichbar über document.implementation wie folgt:

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

InformationsquelleAutor der Antwort Chris Baker

Folgende funktioniert in den meisten gängigen Browsern, aber nicht einige. Dies ist, wie einfach es sollte (muss aber nicht):

//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);

Konto für user-agent Launen, die folgenden kann besser werden (bitte beachten Sie, 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);

Sich nicht abschrecken von der Menge an code, es gibt eine Menge Kommentare, es kann verkürzt werden, einiges wird aber weniger lesbar.

Oh, und wenn Sie den markup-Code ist gültiges XML, das Leben ist viel einfacher:

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')
);

InformationsquelleAutor der Antwort RobG