次のコードを使用して、文字列をDOMに解析します。
_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));
このようなものを試してください:
const fragment = document.createRange().createContextualFragment(html);
一方、htmlは変換する文字列です。
XML/HTML要素にはelement.getAttribute(attributeName)
を使用します