1

我不太确定为什么这段代码没有按照我的意图去做。我有两个 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 不起作用；即为什么没有背景颜色变为红色。

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 回答