すがブロ

sugamasaoのhatenablogだよ

DOM操作:配下のノードを抹殺したい

DOM をいじくるだけの簡単なお仕事

ここ2〜3日、ずっとDOMばかりいじっている。
多少は使った事があったものの、 getElementById や getElementsByTagName や getElementsByName をかろうじて使える程度の、クソ以下の実力しかなかったので大変苦労している。
それにしても DOM をいじくるのが趣味な超人(変態的な意味で)はHTMLの木構造が頭の中でトレースできてるのだろうか? はっきりいっておれには無理だ。そして FireBug が使えないという事情からもよりいっそう追いつめられるわけで、IE Developer Toolbar のみが頼みの綱だった。
そして、実際のところ、IE Devloper Toolbar がとても役に立ってくれた。JSで DOM を操作したあとの木構造等もしっかり解析してくれるのでデバックもやりやすくて、もはやこれ無しで開発を行うのは狂気の沙汰(もしくは一人SM)としか思えないという考えに至った。

というわけで

<body>
  <div id="hoge">
    <span>piyo</span>
    <img>
    <p>huga</p>
  </div>
</body>

このような構造の DOM があったとして、 DIV 要素の中身を消したい。だけど、 DIV 要素自身を消す事は許されない。
こんな状況の時にどのようにすれば良いだろうか。
最初こんな風に書いたけど、これだと要素が span 要素の子供がのこってしまってうまくいかなかった。

var element = document.getElementByid("hoge")
var nodes = element.getChildNodes
for(var i = 0; i < nodes.length; i++) {
  elements.removeChild(nodes[i])
}

動的に要素が減ってしまっていたのだろうか。
仕方ないので、以下のような方法にした。ググったら出てきたのでそのまま使ったのだけど、なんとなくダサい。

var element = document.getElementByid("hoge")
var node = element.firstChild
while(node.nextSibling) {
  element.removeChild(node.nextSibling)
}

ここまで書いておいてあれだけど、これで本当に意図した動きになっているだろうか。なんか正しく動かないような気がしてきたな・・・。数時間前に書いたはずだけど、どんな風に書いたのかもう忘れてしまった/(^o^)\

そんなことよりも

昨日も明日も仕事な件。1000speakers 聞くだけでも参加したかった><