<body>
<div id="div1">
<p>
pppppppppppppppp
</p>
</div>
<div id="div2"><p>pppppppppppppppp</p></div>
</body>
</html>
<script>
var div1 = document.getElementById("div1");
console.log(div1.firstChild);
console.log(div1.childNodes[0]);
console.log(div1.children[0]);
var div2 = document.getElementById("div2");
console.log(div2.firstChild);
console.log(div2.childNodes[0]);
console.log(div2.children[0]);
</script>
输出:
#text
#text
<p>
pppppppppppppppp
</p>
<p>pppppppppppppppp</p>
<p>pppppppppppppppp</p>
<p>pppppppppppppppp</p>
结论:
1、div中的换行被当成了文本节点,是造成三者输出不一致的根本原因
2、firstChild和childNodes[0]识别此文本节点,而children[0]不识别
3、firstChild和childNodes是标准的,而遗憾的是children不是标准的