テキストのみの場合はinnerHTMLを使うべきか

質問

innerHTMLはIE,Firefox,Chorme,safariでも対応しています。
innerTextやtextContentはブラウザによって対応が違いので、
/*@cc_on @if(1) innerText @else@*/ textContent /*@end@*/
のようにして対応させます。
<div></div>の中がテキストのみの場合は、どちらを使った方がよいでしょうか。
innerHTMLはよろしくないと聞いたことがあるのですが、それは
<div></div>の中にタグが含まれる場合に問題が起きてくるということでしょうか。

<div>テキストテキストテキスト</div>
<div>テキストテキストテキスト</div>
<div>テキストテキストテキスト</div>

getElementsByTagName('div')[1].innerHTML
getElementsByTagName('div')[1]./*@cc_on @if(1) innerText @else@*/ textContent /*@end@*/

回答No.1

babu_baboo · ベストアンサー

あけおめことよろ。

innerHTML をつかうと、こうぶんかいせきが はいるので おそくなります。（たぶん）
もし、かきかえられた ようそのなかに、addEventListener なんかで、はりつけた いべんとがあったばあいは、どこかに のこっているかもしれないので、きけん。

innerText も、ようそのなかを てきすとのーどでかきかえてしまうようなものなので どうるい。

<div></div>
もし うえのように ぶろっくようそのなかに なにもないのでなく
<div>&nbsp;</div>
の、ように なかに てきすとのようなものがあれば、
// node = div
node.firstChild.nodeValue = 'hoge';
にする。

お礼

そうでした、明けましておめでとうございます。

>もし、かきかえられた ようそのなかに、addEventListener なんかで、
>はりつけた いべんとがあったばあいは、
>どこかに のこっているかもしれないので、きけん。

DOMを操作するようなものでinnerHTMLを使うとDOMの形が変わり影響がでやすい、ということでしょうか？

><div>&nbsp;</div>
>の、ように なかに てきすとのようなものがあれば、
>// node = div
>node.firstChild.nodeValue = 'hoge';
>にする。

テキストを書き換える場合は、innerHTMLとinnerTextを使うよりもnodeValueで入れ込んだほうが早いし安全、ということですね！

書き換えることなく下記のように参照するだけの場合でもそれは同じことでしょうか。
<div id="d">テキストABC</div>
<script>
(function(){if(document.getElementById("d").innerHTML == "テキストABC"){alert("はい");}})()
</script>

回答No.2

babu_baboo

「（他者からの）変更に（も）強いコードを、書く。」

これが（も）むずかしい！

さんしょう するためには、ひょうか しなければ ならないのだから おなじだとおもう。（たぶん）

お礼

innerHTMLにしてあるところをnodeValueに換えてみようと思います。
ありがとうございました。