如何使用Javascript计算HTML DOM中的子节点？

Question

问题：如何使用Javascript计算HTML DOM中的子节点？

这是我的代码;

<div id="myDiv">
  <p>First p Element.</p>
  <p>Second p Element.</p>
</div>

alert(document.getElementById("myDiv").childNodes.length);
//5

但我认为有4个子节点......

我的解释：

<p></p> (1st) //Element node
First p Element. (2nd) // text node
<p></p> (3rd) //Element node
Second p Element. (4th) // text node

我想知道第5个子节点来自哪里？

关于被认为是文本节点的空白，什么时候被认为没有子节点？

Answer 1

有五个：

1. 包含空格的文本节点（在开头import pandas as pd import csv import datetime import time count = 0 while True: df = pd.read_csv('Feed.csv') df['timestamp'] = dt.datetime.now() df.index=range(count, count+len(df)) count += len(df) f = open('Final.csv', 'a') df.to_csv(f, header = False) f.close() time.sleep(60) # I assume you're missing an indent here? 和第一个<div>之间）
2. <p>元素
3. 包含空格的文本节点（在p和以下</p>之间）
4. <p>元素
5. 包含空格的文本节点（在最后p和</p>之间）

请注意，列表中提到的两个文本节点中的 都不在</div>＆＃39; s myDiv中。它们位于childNodes内的childNodes元素的p中。 myDiv仅包含元素的直接子，而不包括其间接后代。

插图：

＆＃13;
＆＃13;
childNodes
＆＃13;
var nodes = document.getElementById("myDiv").childNodes;
var n, node;
for (n = 0; n < nodes.length; ++n) {
  node = nodes[n];
  if (node.nodeType == 3) { // text node
    console.log(node.nodeName + ": " + JSON.stringify(node.nodeValue));
  } else {
    console.log(node.nodeName);
  }
}
＆＃13;
＆＃13;
＆＃13;