Question

给出以下内容：

<div ID="parent">
<div ID="child1">Children Stuff</div>
<div ID="child2">More Childish things</div>
</div>
<div ID="orphan">Whhhaa I want a mommy</div>


var p = document.getElementById("parent");
var c = document.getElementById("orphan");
p.appendChild(c);
var ch = p.childNodes;
var ln = p.children;
for(var i=0;i < ln.length; i++) {
    console.log(ch[i]);
}
console.log(ln.length);

控制台输出提供：

<div ID="child1">Children Stuff</div>
<div ID="child2">More Childish things</div>
3

这是我迷路的地方：我需要从每个子节点（包括新子节点）获取信息。当然，我不会简单地将它输出到控制台，我需要在与孩子们共享相似ID的其他DOM元素上执行一些逻辑。

为什么不是element.childNodes;打电话接听新生儿？任何帮助表示赞赏。

以上是示例空气代码，所以如果语法不是100％，我很抱歉，但我希望这一点仍然存在。

Answer 1

您正在循环ln.length，但正在阅读ch：

for(var i=0;i < ln.length; i++) {
    console.log(ch[i]);
}

由于ln的长度为3并且包含子元素，所以很快就会出现混乱。 ch的长度为6，包含所有元素（包括仅包含换行符的3个文本元素）。

如果您只添加2个控制台日志，这很容易看到：

console.log('ch',ch);
console.log('ln',ln);

在此处：https://jsfiddle.net/mqhevnsu/

Answer 2

因为你混合了childNodes和children。尝试只使用儿童：

var p = document.getElementById("parent");
var c = document.getElementById("orphan");
p.appendChild(c);
var ln = p.children;
for(var i=0;i < ln.length; i++) {
    console.log(ln[i]);
}
console.log(ln.length);

<div ID="parent">
<div ID="child1">Children Stuff</div>
<div ID="child2">More Childish things</div>
</div>
<div ID="orphan">Whhhaa I want a mommy</div>

Answer 3

如果您修复拼写错误并且在使用p.children或p.childNodes时变得一致，它就会有效：

var p = document.getElementById("parent");
var c = document.getElementById("orphan");
p.appendChild(c);
var ch = p.children;
for(var i=0;i < ch.length; i++) {
console.log(ch[i]);
}
console.log(ch.length);

jsfiddle

Javascript - element.childNodes没有看到append.newchild

3 个答案: