这个 div 元素的第一个子节点是什么？

Question

本例中 'div' 元素的第一个子节点是什么？

我认为这将是第一个 'p' 元素。不过好像是别的东西。

<!DOCTYPE html>
<html>
<body>

<div id="myDiv">
<p>my first paragraph</p>
<p>my second paragraph</p>
</div>

<p id="demo1"></p>
<p id="demo2"></p>


<script>
document.getElementById("demo1").innerHTML = document.getElementById("myDiv").childNodes[0];

document.getElementById("demo2").innerHTML = document.getElementById("myDiv").childNodes[1].childNodes[0].nodeValue;


</script>

</body>
</html>


my first paragraph

my second paragraph

[object Text]

my first paragraph

Answer 1

由于父级的开头有空格，因此 textNode 以空格作为内容。您可以检查 nodeType property(3 represent text node) 以检查节点类型。

console.log(document.getElementById("myDiv").childNodes[0].nodeType)

<div id="myDiv">
  <p>my first paragraph</p>
  <p>my second paragraph</p>
</div>

要仅获取子元素，请使用 children 属性.

document.getElementById("myDiv").children[0].textContent;

console.log(document.getElementById("myDiv").children[0].textContent)

<div id="myDiv">
  <p>my first paragraph</p>
  <p>my second paragraph</p>
</div>

这个 div 元素的第一个子节点是什么？

what is the first child node of this div element?

html

dom

child-nodes