innerHTMLに比べると、outerHTMLを使う頻度はぐっと少ない。現状、IEと Safari, Chrome, Operaが対応していて、未対応はFirefoxだけ。使用頻度が低いメソッドに対して、Firefox向けに、長々しいスクリプトを書くのもどうかねぇ、と思ってググってみたところ、ナイスな投稿がありました 。
sOuterHTML = new XMLSerializer().serializeToString(oElement);
確かに、これは理にかなってますね。outerHTML自体は、値の取得だけでなくて、設定も出来るんだけど、そういう場面はまずないだろうから、このgetterだけで十分ですね。
<div id="Here">Hello, <strong>really strange</strong> World !</div>
対して、
innerHTMLなら
Hello, <strong>really strange</strong> World !
が返されるし、
outerHTMLなら、
<div id="Here">Hello, <strong>really strange</strong> World !</div>
が返される。実装例としては、
function getOuterHTML(e) {
if(e.outerHTML){ // IE, Webkit, Opera
return e.outerHTML;
} else { // Firefox (, Webkit, Opera)
return new XMLSerializer().serializeToString(e);
}
};
あるいは、短く
function getOuterHTML(e) {
return e.outerHTML || new XMLSerializer().serializeToString(e);
};
とか。
outerHTML
Hello, really strange World !
実際には、Firefoxだと xmlns="http://www.w3.org/1999/xhtml" という属性が付加されるので、気になるようなら適宜省けば良いでしょう。
JavaScript
Comments