1

このコードが意図したとおりに動作しない理由がよくわかりません。次のように、2 つの div オブジェクトがあり、それぞれに一連の入力タグがあります。

<div id="div1">
    <input type....></input>
    etc,etc,etc
</div>

一方から入力タグを取得し、もう一方に追加して、その div 内のすべての入力のスタイルを変更したいと思います。これは私が意味するものです：

var div1 = document.getElementById("div1").childNodes;
var div2 = document.getElementById("div2").childNodes;
div1.appendChild(div2[1]);
var i;
for (i = 0; i < div1.length; i++) {
    div1[i].style.backgroundColor = "red";
}

childNodes を使うとタグ間の空白が読み込まれるのは理解していますが、div2[1] が空白にならないようにしました。また、私がやろうとしていることを実行する他の方法があることも理解しており、実際にそれをうまく実行する他の方法を見つけましたが、childNodes を使用した上記のコードが機能しない理由を知りたいです。つまり、backgroundColors がどれも赤に変化しない理由です。

4

2 に答える 2

4

だから問題はここにある

div1 は要素ではなく、ノードのリストです。また、要素であるかどうかを確認せずにノードのスタイルを設定すると、エラーが発生します。

それを機能させるには、次のことを行う必要があります。

var div1 = document.getElementById("div1");
var div1nodes = document.getElementById("div1").childNodes;
var div2nodes = document.getElementById("div2").childNodes;
div1.appendChild(div2nodes[1]);
var i, el;
for (i = 0; i < div1nodes.length; i++) {
    el = div1nodes[i];
    if (el.nodeType === 1) {
      el.style.backgroundColor = "red";
    }
}
于 2014-12-15T18:34:32.627 に答える
0

childNodes にはテキスト ノードとコメント ノードも含まれているため、div2[1] のノードが必要な子ノードであることを確認する必要があります。childNodesすべてのノードを取得しchildren、要素の子のみを含むことに注意してください。

于 2014-12-15T18:32:55.440 に答える