的JavaScript的DOMParser访问的innerHTML和其他属性
问题描述:
我使用下面的代码将一个字符串解析为DOM:的JavaScript的DOMParser访问的innerHTML和其他属性
var doc new DOMParser().parseFromString(string, 'text/xml');
哪里string
只是像<!DOCTYPE html><html><head></head><body>content</body></html>
。
typeof doc
给我object
。如果我执行类似doc.querySelector('body')
的操作,我会返回一个DOM对象。但是,如果我尝试访问任何属性,就像你通常就可以了,它给了我undefined
:
doc.querySelector('body').innerHTML; // undefined
这同样适用于其他属性,如id
。另一方面,属性检索进行得很好doc.querySelector('body').getAttribute('id');
。
有没有神奇的功能可以访问这些属性?
答
您当前的方法失败,因为未为给定的XML文档定义HTML属性。如果您提供text/html
MIME类型,则该方法应起作用。
var string = '<!DOCTYPE html><html><head></head><body>content</body></html>';
var doc = new DOMParser().parseFromString(string, 'text/html');
doc.body.innerHTML; // or doc.querySelector('body').innerHTML
//^Returns "content"
下面的代码使text/html
的MIME类型,它本身不支持它尚未浏览器。从Mozilla Developer Network检索:
/*
* DOMParser HTML extension
* 2012-02-02
*
* By Eli Grey, http://eligrey.com
* Public domain.
* NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
*/
/*! @source https://gist.github.com/1129031 */
/*global document, DOMParser*/
(function(DOMParser) {
"use strict";
var DOMParser_proto = DOMParser.prototype
, real_parseFromString = DOMParser_proto.parseFromString;
// Firefox/Opera/IE throw errors on unsupported types
try {
// WebKit returns null on unsupported types
if ((new DOMParser).parseFromString("", "text/html")) {
// text/html parsing is natively supported
return;
}
} catch (ex) {}
DOMParser_proto.parseFromString = function(markup, type) {
if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
var doc = document.implementation.createHTMLDocument("")
, doc_elt = doc.documentElement
, first_elt;
doc_elt.innerHTML = markup;
first_elt = doc_elt.firstElementChild;
if (doc_elt.childElementCount === 1
&& first_elt.localName.toLowerCase() === "html") {
doc.replaceChild(first_elt, doc_elt);
}
return doc;
} else {
return real_parseFromString.apply(this, arguments);
}
};
}(DOMParser));
答
使用element.getAttribute(attributeName)
为XML/HTML元素
PS。澄清一下,当你使用'text/xml'时,'doc'是'XMDocument'的一个实例。使用'text/html',它是'HTMLDocument'的一个实例。 – 2012-02-12 18:03:53
Waaw,相当有用的答案!我自己找不到那一个。只是MIME类型,并启用该MIME类型:) – DADU 2012-02-12 18:45:23
@RobW我假设你的意思是'XMLDocument'。 – devios1 2012-04-30 21:36:22