DOMParser
对于开发者来说,我们"期盼"的最好的方式当然是原生的浏览器支持,就像下面这样
1: var parser = new DOMParser()
2: var doc = parser.parseFromString("<input />", "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: 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('<!doctype') >-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: }
DOM一般指文档对象模型。
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTML和XML文档是通过说明部分定义的)。
特征:
DOM分为HTML DOM和XML DOM两种。它们分别定义了访问和操作HTML/XML文档的标准方法,并将对应的文档呈现为带有元素、属性和文本的树结构(节点树)。
1、DOM树定义了HTML/XML文档的逻辑结构,给出了一种应用程序访问和处理XML文档的方法。
2、在DOM树中,有一个根节点,所有其他的节点都是根节点的后代。
3、在应用过程中,基于DOM的HTML/XML分析器将一个HTML/XML文档转换成一棵DOM树,应用程序通过对DOM树的操作,来实现对HTML/XML文档数据的操作。