如下所示,父级div的第一个子节点是div,但是实际当中获取到的第一个子节点却显示为text
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="parent">
<div>111</div>
<div>222</div>
<div>333</div>
<p>444</p>
<p>555</p>
<p>666</p>
</div>
<script>
const parent=document.getElementById("parent");
console.log(parent.firstChild); // #text
</script>
</body>
</html>
原因:
是#text 而不是 div ,原因是:父div和子div之间存在空格,而元素中的空格被视作文本,而文本被视作文本节点。
若是父级div和子级div之间不存在空格,则获取到的父级的第一个子节点便是div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
// 即,进行这样写,不留空格
<div id="parent"><div>111</div><div>222</div><div>333</div><p>444</p></div>
<script>
const parent=document.getElementById("parent");
console.log(parent.firstChild); // div
</script>
</body>
</html>