如何使用JavaScript创建Document对象

Question

基本上这就是问题,如何在javascript中动态地从HTML字符串构造一个Document对象？

Answer 1

规范中定义了两种方法,createDocument来自DOM Core Level 2和createHTMLDocumentHTML5.前者创建XML文档(包括XHTML),后者创建HTML文档.两者都作为函数驻留在DOMImplementation接口上.

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

实际上,这些方法相当年轻,仅在最近的浏览器版本中实现.根据http://quirksmode.org和MDN,以下浏览器支持createHTMLDocument:

• Chrome 4
• 歌剧10
• Firefox 4
• Internet Explorer 9
• Safari 4

有趣的是,您可以(在某种程度上)在旧版Internet Explorer中创建HTML文档,使用ActiveXObject:

var htmlDoc = new ActiveXObject("htmlfile");

生成的对象将是一个新文档,可以像处理任何其他文档一样进行操作.

Answer 2

假设您正在尝试从标记字符串和内容类型创建完全解析的Document对象,您也碰巧知道(可能是因为您从xmlhttprequest获取了html,因此在其Content-Typehttp标头中获得了内容类型;可能通常text/html) - 它应该很容易:

var doc = (new DOMParser).parseFromString(markup, mime_type);

在一个理想的未来世界中,浏览器DOMParser实现与文档渲染一样强大和有能力 - 也许这是未来HTML6标准工作的良好管道梦想要求.但事实证明,当前的浏览器并没有这样做.

你可能有一个更简单(但仍然很混乱)的问题,就是你需要一个html字符串来获得一个完全解析的Document对象.这是另一个如何做到这一点,它也应该在所有浏览器中工作 - 首先你创建一个HTML Document对象:

var doc = document.implementation.createHTMLDocument('');

然后用你的html片段填充它:

doc.open();
doc.write(html);
doc.close();

现在你应该在doc中有一个完全解析的DOM,你可以运行alert(doc.title)它,使用css选择器切片,doc.querySelectorAll('p')或者使用ditto XPath doc.evaluate.

这实际上适用于现代WebKit浏览器,如Chrome和Safari(我分别在Chrome 22和Safari 6中测试过) - 这是一个示例,它采用当前页面的源代码,在新的文档变量中重新创建它src,读出它的标题,覆盖它使用相同源代码的html引用版本并在iframe中显示结果:http://codepen.io/johan/full/KLIeE

遗憾的是,我认为其他任何当代浏览器都没有相当可靠的实现.

Answer 3

根据规范 ( doc )，可以使用createHTMLDocument的方法，可通过以下方式DOMImplementation访问：document.implementation

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