如何使用 JavaScript 创建 Document 对象
基本上这就是问题,如何从一串构造 Document 对象javascript 中的 HTML 动态?
Basically that's the question, how is one supposed to construct a Document object from a string of HTML dynamically in javascript?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
规范中定义了两种方法,
createDocument
和createHTMLDocument
来自 HTML5。前者创建 XML 文档(包括 XHTML),后者创建 HTML 文档。两者都作为函数驻留在
DOMImplementation
接口上。实际上,这些方法相当年轻,仅在最近的浏览器版本中实现。根据 http://quirksmode.org 和 MDN,以下浏览器支持
createHTMLDocument
:有趣的是,您可以(某种程度上)在旧版本的Internet Explorer,使用
ActiveXObject
:生成的对象将是一个新文档,可以像任何其他文档一样对其进行操作。
There are two methods defined in specifications,
createDocument
from DOM Core Level 2 andcreateHTMLDocument
from HTML5. The former creates an XML document (including XHTML), the latter creates a HTML document. Both reside, as functions, on theDOMImplementation
interface.In reality, these methods are rather young and only implemented in recent browser releases. According to http://quirksmode.org and MDN, the following browsers support
createHTMLDocument
:Interestingly enough, you can (kind of) create a HTML document in older versions of Internet Explorer, using
ActiveXObject
:The resulting object will be a new document, which can be manipulated just like any other document.
假设您正在尝试从标记字符串和您也碰巧知道的内容类型创建一个完全解析的 Document 对象(可能是因为您从 xmlhttprequest 获取了 html,从而在其
Content 中获取了内容类型-Type
http header;通常可能是text/html
) – 应该这么简单:在理想的未来世界中,浏览器
DOMParser
实现同样强大且有能力因为他们的文档渲染是 –也许这对于未来的HTML6
标准工作来说是一个很好的白日梦要求。但事实证明,当前的浏览器还没有这样做。您可能会遇到更简单(但仍然很混乱)的问题,即您想要获得一个完全解析的
Document
对象的 html 字符串。这是关于如何执行此操作的另一种方法,它也应该适用于所有浏览器 - 首先创建一个 HTMLDocument
对象:然后 用您的 html 片段填充它:
现在您应该在 doc 中拥有一个完全解析的 DOM,您可以运行它
alert(doc.title)
on,使用 css 选择器进行切片,例如doc.querySelectorAll('p')
或使用doc.evaluate
的 XPath。这实际上适用于 Chrome 和 Safari 等现代 WebKit 浏览器(我刚刚分别在 Chrome 22 和 Safari 6 中进行了测试)——这里是一个示例,它获取当前页面的源代码,在新的文档变量
src
,读出其标题,用同一源代码的 html 引用版本覆盖它,并在 iframe 中显示结果:http://codepen.io/johan/full/KLIeE可悲的是,我认为没有任何其他当代浏览器具有如此可靠的功能尚未实施。
Assuming you are trying to create a fully parsed Document object from a string of markup and a content-type you also happen to know (maybe because you got the html from an xmlhttprequest, and thus got the content-type in its
Content-Type
http header; probably usuallytext/html
) – it should be this easy:in an ideal future world where browser
DOMParser
implementations are as strong and competent as their document rendering is – maybe that's a good pipe dream requirement for futureHTML6
standards efforts. It turns out no current browsers do, though.You probably have the easier (but still messy) problem of having a string of html you want to get a fully parsed
Document
object for. Here is another take on how to do that, which also ought to work in all browsers – first you make a HTMLDocument
object:and then populate it with your html fragment:
Now you should have a fully parsed DOM in doc, which you can run
alert(doc.title)
on, slice with css selectors likedoc.querySelectorAll('p')
or ditto XPath usingdoc.evaluate
.This actually works in modern WebKit browsers like Chrome and Safari (I just tested in Chrome 22 and Safari 6 respectively) – here is an example that takes the current page's source code, recreates it in a new document variable
src
, reads out its title, overwrites it with a html quoted version of the same source code and shows the result in an iframe: http://codepen.io/johan/full/KLIeESadly, I don't think any other contemporary browsers have quite as solid implementations yet.
根据规范(doc ),可以使用
DOMImplementation
的createHTMLDocument
方法,可通过document.implementation
访问,如下所示:DOMImplementation
的 MDN 文档:https://developer.mozilla.org/en/DOM/document.implementationDOMImplementation.createHTMLDocument
:https://developer.mozilla.org/ En/DOM/DOMImplementation.createHTMLDocumentPer the spec (doc), one may use the
createHTMLDocument
method ofDOMImplementation
, accessible viadocument.implementation
as follows:DOMImplementation
: https://developer.mozilla.org/en/DOM/document.implementationDOMImplementation.createHTMLDocument
: https://developer.mozilla.org/En/DOM/DOMImplementation.createHTMLDocument以下内容适用于大多数常见浏览器,但不适用于某些浏览器。这就是它应该有多简单(但事实并非如此):
为了考虑到用户代理的变化无常,以下内容可能会更好(请注意归属):
不要因代码量而推迟,有很多注释,可以缩短很多,但可读性较差。
哦,如果标记是有效的 XML,那么事情就简单多了:
The following works in most common browsers, but not some. This is how simple it should be (but isn't):
To account for user agent vagaries, the following may be better (please note attribution):
Don't be put off by the amount of code, there are a lot of comments, it can be shortened quite a bit but becomes less readable.
Oh, and if the markup is valid XML, life is much simpler:
随着 DOMparser 的发展,2014 年的更新答案。这适用于我能找到的所有当前浏览器,并且应该也适用于早期版本的 IE,使用上面的 ecManaut 的 document.implementation.createHTMLDocument('') 方法。
本质上,IE、Opera、Firefox 都可以解析为“text/html”。 Safari 解析为“text/xml”。
但要注意不宽容的 XML 解析。 Safari 解析将在不间断空格和其他用 & 符号指定的 HTML 字符(法语/德语重音)处崩溃。下面的代码不是单独处理每个字符,而是将所有 & 符号替换为无意义的字符串“j!J!”。当在浏览器中显示结果时,该字符串随后可以重新呈现为&符号(我发现,比尝试在“错误”XML解析中处理&符号更简单)。
An updated answer for 2014, as the DOMparser has evolved. This works in all current browsers I can find, and should work too in earlier versions of IE, using ecManaut's document.implementation.createHTMLDocument('') approach above.
Essentially, IE, Opera, Firefox can all parse as "text/html". Safari parses as "text/xml".
Beware of intolerant XML parsing, though. The Safari parse will break down at non-breaking spaces and other HTML characters (French/German accents) designated with ampersands. Rather than handle each character separately, the code below replaces all ampersands with meaningless character string "j!J!". This string can subsequently be re-rendered as an ampersand when displaying the results in a browser (simpler, I have found, than trying to handle ampersands in "false" XML parsing).