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" という属性が付加されるので、気になるようなら適宜省けば良いでしょう。
Comments