Javascript DOM子节点与父节点的输出相同

为什么这些代码产生相同的控制台输出

html输出： 游

自行车

跑

第一个不应该输出p标签文本内容

1. 2. html摘录：

<section id="sports">
        <p class="swim">Swim</p>
        <p id="bike">Bike</p>
        <p>Run</p>
    </section

游泳

自行车

跑

它们不会产生@Observer建议的相同结果

“childNodes属性将节点的子节点集合作为节点列表对象返回。”
它们不会产生与@Observer建议的结果相同的结果

“childNodes属性将节点的子节点集合作为节点列表对象返回。”
我们也可以看到html吗？它们没有。第一个是节点列表，第二个是文档对象（及其内容）。在第二个变量中，变量
sports
只引用
DOM对象，但是当您执行
console.log（sports）
时，
console.log（）
实现选择向您显示该DOM元素及其内容。这就是
console.log（）
的实现方式。顺便说一下，只有html标记可以是节点？所有html标记都是节点，但并非所有节点都是html标记。。。有文本节点、注释节点等，我们也可以看到html吗？它们没有。第一个是节点列表，第二个是文档对象（及其内容）。在第二个变量中，变量
sports
只引用
DOM对象，但是当您执行
console.log（sports）
时，
console.log（）
实现选择向您显示该DOM元素及其内容。这就是
console.log（）
的实现方式。顺便说一下，只有html标记可以是节点？所有html标记都是节点，但并非所有节点都是html标记。。。有文本节点、注释节点，etcI是指html文件输出的console.log。我是指html文件输出的console.log。
var sports = document.getElementById('sports');
console.log(sports);

<section id="sports">
        <p class="swim">Swim</p>
        <p id="bike">Bike</p>
        <p>Run</p>
    </section