如何将HTML String 转换为 dom 元素

前一段时间因为需求，所以把这方面的资料自己查询规整了一下，以备后用。

DOMParser

对于开发者来说，我们"期盼"的最好的方式当然是原生的浏览器支持，就像下面这样

   1:  var parser = new DOMParser();

   2:  var doc = parser.parseFromString("", "text/html");

Tips:

1. parseFromString 返回的并不仅仅是一个 input 元素的 node， 而是一个完整的 Document
   
2. 这里是支持 script 标签的， 但是当解析出的 dom 被添加到页面时，script是不会被执行的
   
3. 最好保证格式良好，否则可能并不会展现如我们预期的 dom 结构

遗憾的是，DOMParser 对 HTML 的解析仅仅得到了 Firefox 12+, IE 10+ 的支持，其余的浏览器均不支持，所以我们要寻求浏览器兼容性更好的方法

InnerHTML

用 javascript 写一个简易的 parser 其实并不是很难，基本的雏形就像下面这样

   1:  (function (DOMParser) {

   2:      "use strict";

   3:   

   4:      var

   5:      DOMParser_proto = DOMParser.prototype,

   6:          real_parseFromString = DOMParser_proto.parseFromString;

   7:   

   8:      // Firefox/Opera/IE throw errors on unsupported types

   9:      try {

  10:          // WebKit returns null on unsupported types

  11:          if ((new DOMParser).parseFromString("", "text/html")) {

  12:              // text/html parsing is natively supported

  13:              return;

  14:          }

  15:      } catch (ex) {}

  16:   

  17:      DOMParser_proto.parseFromString = function (markup, type) {

  18:          if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {

  19:              var

  20:              doc = document.implementation.createHTMLDocument("");

  21:              if (markup.toLowerCase().indexOf(') > -1) {

  22:                  doc.documentElement.innerHTML = markup;

  23:              } else {

  24:                  doc.body.innerHTML = markup;

  25:              }

  26:              return doc;

  27:          } else {

  28:              return real_parseFromString.apply(this, arguments);

  29:          }

  30:      };

  31:  }(DOMParser));

真正在使用时，我们可能不希望返回的是一个完整的 Document， 而仅仅是一个 html 片段，那采用下面的代码也许更方便

   1:  function parseStringToHTML(text) {

   2:      var i, a = document.createElement("div"),

   3:          b = document.createDocumentFragment();

   4:      a.innerHTML = text;

   5:      while (i = a.firstChild) b.appendChild(i);

   6:      return b;

   7:  }

jQuery

如果需求的是一个更加强大，更加完善的解析方法，有不少 javascript 库都提供了 这样的功能，jQuery 也不例外，详情请猛戳  jQuery.parseHTML 方法 的 API  和 源码 ， 相关源码 。 jQuery 使用的其实仍然是 innerHTML ， 但是因为要支持更为严格的 XHTML，为了正确的关闭标签，浏览器兼容性等问题，所以 parseHTML 要完成更多的工作。

Reference

1. Mozilla Developer 上关于DOMParser的介绍
2. jQuery.parseHTML 的API
3. stackoverflow上的关于解析dom的提问