http://jsbin.com/talim/2/edit

contenteditableなdivの中に、
hogeというリンクを設定しておきます
この文字をすべて削除します
そして再び文字を入力すると、
chromeだけですが、
入力した文字が何故か<u>タグで挟まれてしまいます
これは訳の分からない奇妙な挙動だと思います
これを防ぐにはどうしたらいいのでしょうか？

http://jsbin.com/talim/3/edit

ふと思いついて、aタグのスタイルを
text-decoration: none;
にしたら、uタグを付ける奇妙な挙動が消えました
これはバグですよね・・

http://jsbin.com/soxal/2/edit

aタグは関係ありませんでした
文字に色々なスタイルを適用しておいて、
それをすべて削除→文字入力
とすると、それまでのスタイルを再現しようとします
まったくひどい実装です
このスタイルの再現をJavaScriptでリセットすることは出来るのでしょうか？

Professional JavaScript for Web developersには
DOMの説明が詳細に書かれていますが
日本語の書籍でこのレベルのものはありますか？

The cloneNode() method doesn’t copy JavaScript properties that you add to
DOM nodes, such as event handlers. This method copies only attributes and,
optionally, child nodes. Everything else is lost. Internet Explorer has a bug
where event handlers are also cloned, so removing event handlers before cloning
is recommended.

とありましたが、
cloneNodeで同時にイベントハンドラもクローンされるということは、
イベントハンドラはDOM要素のプロパティということでしょうか？

まずは英語の勉強からだな。

JavaScript propertiesと書いてますが、そうは思ってませんでした
プロパティーならイベントリスナーをリスト的に読めたりすると思うのですが
そういう形で扱えませんよね？

>Internet Explorer has a bug where event handlers are also cloned
なんでここ無視するん?

しまった他のとこのが名前に残ってた
俺231じゃないから

IEにバグがあろうがなかろうが
イベントリスナーがDOMのプロパティーという事実には変わりないので
バグは本質じゃないでしょう

DOMノードを親から切り離して、別の親に付けることはできますか？
クローン作成→それまでのノードを削除
で、結果的に移動させることはできそうですが
既にあるものをそのまま移動できたらコスト的にも一番いいと思います

一時変数にコピーして突っ込んで元のにはnullじゃあかんのか

http://jsbin.com/xesav/1/edit

一度配列にコピーして、他の親にappendChildすれば、移動出来ました
ありがとうございました

>>363
ちょっと無駄が多すぎるので修正してあげたよ。参考にしてね。

http://jsbin.com/xesav/5/edit

>>364
ライブラリを使ったコードに修正されているようだけど、元々がライブラリなしなので意味がないのでは。

>>365
DOMライブラリだって、JavaScriptの仕様じゃなくて
ブラウザが持ってるライブラリだし。

だいたいライブラリを使わないという条件なんて書いてないし
目的はDOMノードの移動なんだから問題ないでしょ。

目的を見失っちゃいかんよ。

>>365に同意
ライブラリ自体がお荷物で比べ物にならないほど無駄
南極にごみを全部集めて地球はキレイになりましたって言ってるようなもの
良い悪いが言いたいのではなくて>>364の主張がおかしいということを言っている
本質（）云々ではなくそれ以前の論理的思考が変だねってこと

わかりやすい釣りだなｗ

無駄かどうかは、自分で書いたコードの
行数で判断しろよ。どちらが時間がかかったか。

そこらへんは環境次第ってことで沈静しませう

まあ蛇足だけどいいんじゃね?

>>368　なんか周りと噛み合ってなくない？
ソースコードそのものじゃなくて、ライブラリーを当然のように使って、
使わないのが無駄と言うかのような態度が悪いって言われてるんだと思うよ。
多分。

そもそもロジック的な内容の質問なんだから、
ライブラリーを使って示すこと自体がアレだと思うし、
それで単純化できたとしても質問の本質的に適さないと思わない？

そんなことより、配列を for-in で参照しているところが気になる。

プログラマーってロジックってよく言う

配列よりDocumentFlagment使った方がいいの？

そもそも変数に退避させる必要がないよ

じゃあこれで
document.append.apply(test1, test.childNodes)

>>364
なるほど、jqueryで書き直すと簡単ですね
ありがとうございました

>>374
それはどうやるんですか？
>>375
childNodesをループさせながらappendすると
その時点で移動元の配列が短くなるので、変になります。
いい方法がありますか？

そういう時は添字不要のfirstChild又はlastChildあたりがお手軽なのでは
あるいはchildNodesを後ろからループさせてinsertBeforeとかね

こんな感じで

while( source.firstChild ){
destination.appendChild( source.firstChild )
}

なるほど～
firstChildとか微妙に使い道が分からなかったのですが
こういう使い方が出来るんですね
ありがとうございました

>>380
その方法はノードの数だけリフローが発生するのでDocumentFlagmentに入れて一度にappendChildする方がいいと思う。

このJSはわかる人が見たら簡単なスクリプトなんでしょうか？
timers = []; の役割が全然わからないです。試しにこの配列の中を["あ", "い", "う"];にしても何も変わらず動きます。

あと、関数とは海水を真水に変える装置と考えると引数は海水で戻り値が真水という例えを見ました。
function runSlot(n) の処理部分はわかるのですが、ここでのnの意味がわかりません。なぜhtmlのid="num0" id="num1" id="num2"を
JSの("num"+n)でnの部分が自動で数字になって、それぞれを取得できるのか、なぜtimers[n]と書いているのかnは何の役割になっているのか

何度見返してもこの部分だけがわかりません。どなたか幼稚園児にでも理解できるくらいにかみ砕いて教えてもらえませんか？
他の部分はわかっても、その部分がわからないので「なんで動いているのか？」が理解できません。詳しい人助けてください・・


var timers;

function startSlot () {
timers = [];
runSlot(0);
runSlot(1);
runSlot(2);
}

function runSlot (n) {
document.getElementById("num"+n).innerHTML = Math.floor(Math.random() * 10);
timers[n] = setTimeout(function () {
runSlot(n);
}, 50);
}

startSlot();

なあにその喩え

> あと、関数とは海水を真水に変える装置と考えると引数は海水で戻り値が真水という例えを見ました。
これか
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1315948363

とてもわかりにくかったです
本当にありがとうございました

スクリプトはすごく簡単なのに
質問文が長文すぎて読むのがつらい

引数を勉強するといい

>>383
クロージャがわからないのか、timeoutID がわからないのか。

timeoutID は clearTimeout の為に定義される。それ以外の活用法はない。
例示コードでは timeoutID は活用されてないので無意味。事後処理として clearTimeout を使ったほうがいい。
http://developer.mozilla.org/ja/docs/Web/API/window.setTimeout

ところで、runSlot で実行順が保障されないのは大丈夫なのか。
本題とは関係なさそうたが、若干気になる。

>>382
現実の実装はループ内で（実行単位の中で）リフローを要するような処理
（要素の座標やスクロール位置へのアクセスなど）
を行わない限り、いちいちリフローさせないだろう
（それができないブラウザはたぶん淘汰されている）

DOM Range を使えば除去も追加も一括してできるが、実験してみたら
>>380 より却って遅いか（ FF）または大体同じ（Chrome）だった
（Range の実行速度自体は両ブラウザとも大体同じ）

>>389
appendChildはリフローを発生させる処理だと思ったが、違ったのだろうか。

ブラウザは複数のリフロー処理をキャッシュするから問題ないという意味ならブラウザに負荷をかけるだけなので極力避けるべきだと思うのだが…。
(速い遅い以前に必要以上にCPUを消費する)

chromeでselectionオブジェクトの中を見ると
extentNodeというプロパティがありますが
これは何でしょうか？
http://developer.mozilla.org/en-US/docs/Web/API/Selection
ここにも載っていません

挿入位置がバラバラな時は逐一appendChildしてたけど
最悪bodyごとDocumentFlagmentにcloneNodeして弄ってから
replaceChildした方がマシなのかな

僕の脳内ベンチでは
DocumentFragmentの生成と貼り付けで二行も増えるからむしろ遅くなる
最適化されたネイティブコードさんに任せた方が速い

selectionとかrange関係のところが複雑怪奇すぎます
JavaScriptでもっとも分かりにくいところではないでしょうか
このあたりを分かっている日本人はほとんどいないのでは？

仕様そのものよりブラウザ間の差異のほうがよっぽど厄介だよ

親指シフト入力ソフトを使っていると、
ある条件でkeyupが発生しないことを発見しました
条件とはATOKとchromeを使い、文節確定した時です
keyupでフォームコントロールの変化を検知しているので、困ります
keyupの代わりに検知する方法はありますか？

DOM要素をremoveChildしてもその要素への参照は切れないの？

どこからの参照を問題にしているのだ？
切れる切れないのどこが問題にされているのだ？

removeChildした要素をスクリプトの変数に代入してれば
その変数から参照されている、
という至極当たり前の話にしかならないし
代入していなければ、そのうちガーベジコレクトされる
という至極当たり前の話にしかならない

異言語間の循環参照を断ち切るためDOM→JSは弱参照で実装するノウハウが有る
だからルートから切り離されて、JSが離したノードは問答無用で捨てられる
実はこのせいで開放されるべきではないところで開放されてしまうケースもあるが目をつぶられてる
通常ハマることはないが一応知っておいた方がいい

removeChildして切り離された要素をaddChildしたら復活するの？