>>649
参照を切らなくて済むなら切らないほうが良いに決まってるでしょ

今日になっていきなり当然だろ当然だろ連呼しだしたやつも怪しいもんだな

innerHTMLを使わなければ参照が切れない状況ならinnerHTMLを使わないほうが良い
常識で考えればすぐ分かるはずだがな

むしろ逆に考えて
子ノードを持っているノードについて操作したい場面はどのくらいあるのか？
このとき子ノードに対して何かしているケースはどのくらいの割合か？

たいしたことしてない俺の経験上ではいずれもほとんど無かったがお前らどうよ

>>651
> 参照を切らなくて済むなら切らないほうが良いに決まってるでしょ
中身が別物になってるんだから、同じものを指すべきじゃない。

>>652
いや、やっとこの馬鹿が言ってる「問題」が判明したからだよ。

中身を違うものに入れ替えてるのに、前の情報を保持したい？
そんなアホなことを言ってるとは思わなかったよ。

>>653
> innerHTMLを使わなければ参照が切れない状況ならinnerHTMLを使わないほうが良い

考える順番がおかしい。

最初に考えるべきなのは、中身を新しいものに入れ替えたいのか、
中身は同じで、その属性を変えたいだけなのか。

これを最初に考えるべきでしょうが。
そしてやりたい事にあった命令を使うだけの話。

>>639
"この文章をクリックすると TEXT_NODE 値を置換する。" が大嘘すぎる
tagNameや属性値も置換対象に入ってる
TEXT_NODE のみを置換対象にすべき

>>643
html()はイベントとか切れないように色々工夫してるんだが？
問題点分かって無い奴はレスすんな

>>655
> 中身を違うものに入れ替えてるのに、前の情報を保持したい？
おまえのいう「中身」を違うものに入れ替える必要がない事はhttp://jsfiddle.net/Pc87X/1/ で証明されているわけだが、おまえの目は節穴なのか？

だらだら書いてるわりに実質ちょっと言い換えただけのありがたい説明文はいらねーよ

他の質問が流れるからモンスター質問者に関わるのも考え物

>>650
> プリミディブ型のように文字列でゴリゴリ処理する方が不自然だって事が感覚としてわからないなら、その程度の実力って事なんだろうな
これは文字列かどうかの問題じゃない。
innerHTMLに新しい文字列を代入するというのは、新しい文字列から生成したオブジェクトに入れ替えてるのと同じ。

obj = new Object;
obj.prop = 1;

obj = new Object;
console.log(obj.prop); // 1と表示されないじゃないか！

って言ってるのと同じ。

innerHTMLを新しいオブジェクトに入れ替えたのだから、その子オブジェクトも入れ替わる。
document.createElementを使った方法であっても、新しく作った要素に入れ替えたのなら、
古い要素のイベントハンドラは消える。


あと、HTMLを扱うときは、文字列で扱ったほうが速い。なぜなら単なる文字列は
メモリ内で終わる作業だから、重いDOMツリーの更新は必要ないし、
ブラウザの機能としてHTMLのパースは、もっともよく使う部分で、一番最適化されているから。

そういうこともわからない程度の実力かい？

>>659
innerHTMLは、中身を入れ替える命令。

中身を入れ替えたくないのなら、innerHTMLを使うのが馬鹿だし、
中身を入れ替えたいなら、innerHTMLを使うのが良い。

そんな使い分けもできないの？

君は、最初にやりたい事をはっきりさせてから、
プログラムしようね。目的に合わない命令を使って
わーわー騒ぐんじゃない。

>>658
> html()はイベントとか切れないように色々工夫してるんだが？

してません。

>>664
それは俺も思った
工夫しているのは .on() だよな

スレが質問こなさそうな状況だからいうが
質問と真っ当な回答を抜き出して検索性インデックス性をなんとか作り出してナレッジベース化したら役に立つだろうか

>>662
> あと、HTMLを扱うときは、文字列で扱ったほうが速い。なぜなら単なる文字列は
> メモリ内で終わる作業だから、重いDOMツリーの更新は必要ないし、
> ブラウザの機能としてHTMLのパースは、もっともよく使う部分で、一番最適化されているから。

そうなんだよね。俺も十数年ぐらい前は、たとえばテーブルを作るのに、
tableをcreateElementして、trをcreateElementして、tdをcreateElementして
appendChildを繰り返して・・・ってDOM操作で何行もかけて作っていた
時もあったけど、今は遅いし面倒なだけなので文字列で生成している。

innerHTML = '<table><tr><th>header</th><td>data</td></tr></table>';

これをDOM操作で作っても重いし面倒なだけ。何一つメリットがない。

さらに言えば、文字列の連結も一が多くなると見難くなるから、
少し複雑なのはlodashのtemplate機能を使ってるよ。

>>664-659
両方している

html()がやってるのは、中身を入れ替えた時に消える古いオブジェクトに対して
ブラウザの不具合によるメモリリークな問題に対応する処理で、
イベントハンドラは普通に切れる。

>>663
> 中身を入れ替えたくないのなら、innerHTMLを使うのが馬鹿だし、
>>655で「中身が別物になってるんだから、同じものを指すべきじゃない。」と発言しているのはなぜ？
別物にする必要がないでしょ？

参照が切れると動かない事例として jQuery.data() がある

参照が切れないコードなら問題はない
http://jsfiddle.net/Pc87X/7/
jQuery の .html() を使用すると参照が切れて、jQuery.data() が期待通りに動作しなくなる
http://jsfiddle.net/Pc87X/9/

>>618で説明したノードのキャッシュも原理的には同じ問題だ

>>639
少なくとも、http://jsfiddle.net/Pc87X/1/ やhttp://jsfiddle.net/Pc87X/7/ では参照を切る必要がなかった
>>655の言葉を借りるなら「中身を入れ替える必要がない」というのだろうか
だから、この場合は「innerHTML や .html() を使うべきではない」といえる

>>670
まあ大抵はIDに対してイベントハンドラ付加したりしてるから、直感的にはそう思っても仕方ない
けどイベントハンドラの設定も参照の作成もIDが必須になっているわけではない
なので内部構造としてノード・ツリー構造があるわけで、IDは表面上の操作と内部の位置とを橋渡ししているに過ぎない

こういう状況の中で、.innerHTMLで要素の中身を入れ替えたり操作したりするとき、
入れ替える前と後で、中身が持っている子要素が同じであるかどうかを保証するわけにはいかない
だからイベントハンドラは消失するし参照も切れる、それが当然の動作になってしまう
（付加したイベントハンドラは理論上すぐ消えるはずだけど、個人的になぜかそうとは限らないように思う）


…と、自分はこういうふうに理解してるけど、間違いあるかな

>>670
> 別物にする必要がないでしょ？

なんで決め付けるの？

別物にしたいときは、別物。そうでない時は、そうでない。
別物にしたいときは、イベントが残っていたら大問題。

html()、innerHTMLを使うかどうかは、
どっちが目的かで変わるわけで、
なんで最初の目的を限定してから使えないって話するの？
意味がわからない。

>>661
> jQuery の .html() を使用すると参照が切れて、jQuery.data() が期待通りに動作しなくなる

だからさ、それは「問題」じゃないんだって、

html()の仕様として、要素を丸ごと入れ替えるものだから
data()は消えるのが仕様として正しい。

なんで、目的にあってないものを使ってるくせに
それが問題だっていうのさ。馬鹿じゃん？

蛇足だが、http://jsfiddle.net/Pc87X/5/ はテキストノード値の置換ではない(>>657の指摘通り)
私がhttp://jsfiddle.net/Pc87X/ で挙げた悪例をそのまま流用していると思われるが、良い実装ではないのでhttp://jsfiddle.net/Pc87X/9/ では正規表現でテキストノード部分を置換するようにしている
そもそも、innerHTML はテキストノード値の置換に向いていないし、他のAPIを使うべきとは思うのだが、jQuery には適切なAPIが存在しないな

>>674
> なんで、目的にあってないものを使ってるくせにそれが問題だっていうのさ。
>>639が問題ないと主張するから反論しているだけなのだが…
文句は>>639にいってくれ

innerHTMLは要素オブジェクトをまるごと入れ替えるという
仕様なのだから、その要素に結びついたデータは消えるのが正しい動き。
それは正しいまともな仕様なので、バグではない。

>>676

>>639は問題ないでしょ？

あんた、dataも一緒でなければならないという
条件を最初に提示したかい？

innerHTMLやjQueryのhtml()もそれ自体に問題があるわけではなく、
要素を入れ替えるという仕様なんだからそれに付随するデータも消える。

この仕様で問題があるかどうかは要件によって変わるので、
一概に問題があると決め付けることは出来ない。
いい加減に理解しようぜ。

$obj.innerHTML += 'test';
とかしたとき、イベントハンドラが失効したり参照が切れたりするのは
JavaScriptのコード打っていると面倒に思うことがあるのは確かだろうけど

仕様作る側やブラウザの実装やる側に立って考えると
これを失効しないように参照が切れないように作るのってすごく大変そう

> 参照が切れる切れるうざくね？
> なんでそんなものに執着してるのか。
これが発端だろ
参照が切れる問題点が全く分かっていない奴に説明してるだけだろ

>>680
大変じゃなくて不可能

innerHTMLはHTMLを代入する命令なのだから
HTMLとして表現できるもの以外には対応できない。

そういう仕様。

>>677
バグとは誰も言ってない
仕様なのは皆分かってる

>>681
だから参照が切れるのは問題点じゃないんだって言ってるだろ。
第一、参照が切れてるんじゃない。

全く別のオブジェクトに入れ替えてるんだから、
そもそも参照が最初っから存在しないんだよ。

>>683
”正しい”仕様な。

どうも正しい仕様なのに、
それが問題であるかのように
言ってる奴がいる。

> 全く別のオブジェクトに入れ替えてるんだから、
> そもそも参照が最初っから存在しないんだよ。
これは酷い

innerHTMLは、新しいHTMLオブジェクトに入れ替えたい時に
使うもので、新しいHTMLオブジェクトに入れ替えるのだから
イベントハンドラもdataも初期化された状態になってほしいね。

>>685
じゃあ、eval 使えば？

>>686
？
ひどくないんだが？

element.innerHTML に代入するということは、
新しい要素オブジェクトをcreateElementして、
elementの子供を新しい要素に入れ替えることと
全く同じだよ。

擬似命令で書くなれば
element.innerHTMLObject = document.createElement('a');
みたいなもの。

document.createElement('a')した結果に
イベントハンドラがついているかい？
最初っからついてないだろ。

innerHTMLが内部で、文字列から新しい要素オブジェクト郡を作成して
それに入れ替えてるだけってのが、わかってない。

>>685
正しさの判断基準はどこにあるんだよ
逆に「間違った仕様」があるのか？

'a' が顔文字にみえる

>>690
正しい仕様っていうのは、

innerHTMLを取得した時にそれはHTML表現を取得するものであって
DOM要素をシリアライズしたものではないということ

つまりHTMLで表現でされているものだけが取得され
HTMLでない情報は存在しない。

だって、その名の通り inner "HTML" なのだから。

そこにHTMLで定義してない情報まで
シリアライズされるべきだと思ってるのが「間違った仕様」

>>644
Element.clientWidth,
Element.clientHeight
かな

>>693
ありがとうございました

それは正しい仕様ではなくただの「仕様」、間違った仕様ではなく「間違った認識」である

>>689
長文書いてるところすまんけど
> そもそも参照が最初っから存在しないんだよ。
こんなこと書いてるから「お前参照とか使ったことないだろ」って突っ込まれたんじゃないのかい
参照を作る→参照先が消滅（＆別の新しい要素が生まれる）→作った参照が失われる
この流れを話してるのに「参照が最初っから存在しない」は無いわ、と

意地になってるだけの奴に何言っても無駄だろ

GCの原理が理解出来てないんだろうなあ

text-overflow: ellipsis;
で省略されているかされていないかを判定するにはどうしたらいいでしょうか？
出来ないなら、自前で同じことをするしかないと思いますが・・

>>695
innerHTMLに代入する値はただの文字列で、
代入した後に内部で処理されるまで
オブジェクトの参照は存在しませんが？

元々の参照とは全くの別なんだ？
それをわかっていて代入してるんだが？
innderHTMLに代入するということは
別のオブジェクトを作ろうとしてるんだよ。

イベントハンドラとかdataとかリセットされるべきじゃないか。

ほんと何言っても無駄だな