node.outerHTML=node.innerHTML

javascript:[].forEach.call(document.querySelectorAll("a.keyword"),function(node){node.outerHTML=node.innerHTML}) //はてなキーワードを消す

http://twitter.com/javascripter/statuses/10020660290

outerHTML ?


javascripter said:

<div>foo</div>というHTMLがあった時、divのinnerHTMLは"foo"でouterHTMLは"<div>foo</div>"です。HTML5に規格が含まれていて、SafariやGoogle Chrome、Opera、Internet Explorerなど、Firefox以外ではだいたい使えます。outerHTML = innerHTMLというのはnodeのタグを除去して内側のコンテンツだけにする常套句です。

http://d.hatena.ne.jp/taizooo/20100307/1267942383#c1267948276

よく考えると innerHTML ってスゴイよなー node.innerHTML で呼び出すとその node の子供の要素の HTML 文字列が取れて node.innerHTML = "HTML 文字列" ってやると HTML パース(ここがポイント)してその子供の要素に置き換えてるっつうことだ。便利だよなあ。パワフル。

あと「世界 == Firefox」 だと思っているところがあって、他所の世界を全然知らない、ということがよくわかった。

node.outerHTML 早く使えるようになるといいな。HTML 文字列をパースしてそれで node をリプレイスできるってことだな(いや、よくわかっていない)


replace on prototype なんていうの見つけたゾ

replace: function(element, html) {
  element = $(element);
  html = typeof html == 'undefined' ? '' : html.toString();
  if (element.outerHTML) {
    element.outerHTML = html.stripScripts();
  } else {
    var range = element.ownerDocument.createRange();
    range.selectNodeContents(element);
    element.parentNode.replaceChild(
      range.createContextualFragment(html.stripScripts()), element);
  }
  setTimeout(function() {html.evalScripts()}, 10);
  return element;
},


ほらねー outerHTML が無いとえらく手間じゃないかい。

node.outerHTML=node.innerHTML

これが

var range = node.ownerDocument.createRange();
range.selectNodeContents(node);
node.parentNode.replaceChild(range.createContextualFragment(node.innerHTML), element);

ってかんじかしら? (ref: http://d.hatena.ne.jp/taizooo/20100127/1264559630)


おお? これは深くないか…
replace する方法は上のヤツでいいんだろうけど outerHTML が無いときにそれと同等の HTML ソースをとり出すのってどうすんだ? element.parentNode.innerHTLM つうわけにはいかんぞ。おお、これは深いゾ。


XMLSerializer なんつーもんがあるな

node=$x('//a[contains(text(),"Permalink")]')[0]
//<a href="/taizooo/20100307/1267942383">Permalink</a>
new XMLSerializer().serializeToString(node)
//"<a xmlns="http://www.w3.org/1999/xhtml" href="/taizooo/20100307/1267942383">Permalink</a>"

xmlns="http://www.w3.org/1999/xhtml" とかついてるけど。


thx javascripter!
div つくって node を突っ込んで div.innerHTML か! 

function outerHTML(node, value) {
 if (”outerHTML” in node) {
   if (value !== undefined) {
     node.outerHTML = value;
   }
   return outerHTML;
 }
 var range;
 if (value !== undefined) {
   range = node.ownerDocument.createRange();
   range.selectNodeContents(node);
   node.parentNode.replaceChild(range.createContextualFragment(node.innerHTML), node);
   range.detach();
   return value;
 }
 var div = node.ownerDocument.createElement(”div”);
 div.appendChild(node.cloneNode(true));
 return div.innerHTML;
}

うーん、こんな感じですかね…。

http://d.hatena.ne.jp/taizooo/20100307/1267942383#c1267975382