【javascript】DOM走査中にDOM操作をしてはならない

Tweet

Category JavaScript 2010/04/26

文字通りのことなのだが、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])
}

・こうなる
テスト１テスト２テスト３テスト４テスト５