dom - 为什么这个childNodes[3] 在这个 DOM 中吗？

Question

伙计们，我对 DOM 层次结构感到困惑。我读过一些浏览器将空格和文本作为节点读取，这被称为 DOM 的垃圾工件。所以我想了解<p>P1</p>这个 DOM 中的 childNodes[3] 是怎样的：

<div>
  <p>P0</p>
  <p>P1</p>
</div>

<button onclick="hideFn();">hideBtn</button>
<script>
function hideFn()
    {
         document.getElementById("myDiv").childNodes[3].style.background="red";

    }
</script>

Answer 1

您的 div 包含：

0. A text node consisting of white space.
1. A p element node containing a text node consisting of P0.
2. Another text node consisting of white space.
3. A p element node containing a text node consisting of P1.
4. Another text node consisting of white space.

并不是说“某些浏览器将文本作为节点读取”，这在某种程度上是“垃圾”——文本 节点只是 DOM 的一部分。

（换行符、空格字符和所有其他形式的空格都是文本。）