【javascript】DOM走査中にDOM操作をしてはならない
文字通りのことなのだが、document.getElementsByTagName(“input”)で取得した要素たちに対して1番目の後ろに新しい要素を追加して(insertAfter)、2番目を消して(removeChild)。。。といった処理を進めると、追加、削除のたびにn番目がずれていくので、むちゃくちゃな結果になることがある。
取得した要素のリストに対していったん走査して、操作の対象を拾い出して、拾い出した要素に対して操作するという流れが無難。
これはダメ
var select = document.getElementById("xxxxxx") var options = select.getElementsByTagName("option") for (var i = 0, l = options.length; i < l; ++i) { //選択されている要素以外を削除してみる if(!options[i].selected) { select.removeChild(options[i]) } }
・こうなる
こうする
var select = document.getElementById("yyyyyy") var options = select.getElementsByTagName("option") var targets = [] for (var i = 0, l = options.length; i < l; ++i) { //選択されている要素以外を削除したかったら、いったん選択されていない要素を拾い出して if(!options[i].selected) { targets[] = options[i] } } //拾い出した要素に対して操作する for (var i = 0, l = targets.length; i < l; ++i) { select.removeChild(targets[i]) }
・こうなる
コメント