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

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; 没有？打电话接新 child 吗？ 如有任何帮助，我们将不胜感激。

上面是示例空气代码，所以如果语法不是 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/