把html转换为document,如何将HTML String 转换为 dom 元素

动漫人物

前一段时间因为需求，所以把这方面的资料自己查询规整了一下，以备后用。DOMParser对于开发者来说，我们"期盼"的最好的方式当然是原生的浏览器支持，就像下面这样1: var parser = new DOMParser();2: var doc = parser.parseFromString("", "text/html");Tips:parseFromString 返回的并不仅仅是一个 input 元素的 node， 而是一个完整的 Document这里是支持 script 标签的， 但是当解析出的 dom 被添加到页面时，script是不会被执行的最好保证格式良好，否则可能并不会展现如我们预期的 dom 结构遗憾的是，DOMParser 对 HTML 的解析仅仅得到了 Firefox 12+, IE 10+ 的支持，其余的浏览器均不支持，所以我们要寻求浏览器兼容性更好的方法InnerHTML用 javascript 写一个简易的 parser 其实并不是很难，基本的雏形就像下面这样1: (function (DOMParser) {2: "use strict";3:4: var5: DOMParser_proto = DOMParser.prototype,6: real_parseFromString = DOMParser_proto.parseFromString;7:8: // Firefox/Opera/IE throw errors on unsupported types9: try {10: // WebKit returns null on unsupported types11: if ((new DOMParser).parseFromString("", "text/html")) {12: // text/html parsing is natively supported13: return;14: }15: } catch (ex) {}16:17: DOMParser_proto.parseFromString = function (markup, type) {18: if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {19: var20: 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: }