节点列表中的额外文本节点？

Answer 1

它用于每个子

<div>

元素之间的空白。这是删除了空格的标记，因此

Text

中不存在

.childNodes

节点。

console.log(document.querySelector('.section1').childNodes)

<section class="section1"><div class="parent">
    <p class="childP">hello</p>
  </div><div class="parent">
    <p class="childP">bro
  </div><div class="parent-3">
    <p class="childP">bro
  </div></section>

Answer 2

section.childNodes

结果中的额外文本节点是 HTML 标记中的 div 元素之间的 whitespace 字符（换行符和空格）。在 DOM 中，whitespace 字符被视为文本节点，就像任何其他文本内容一样。

const section = document.querySelector('.section1');
const children = [];

section.childNodes.forEach(node => {
  if (node.nodeType === Node.ELEMENT_NODE) {
    children.push(node);
  }
});


console.log(children);

<section class="section1">
  <div class="parent">
      <p class="childP">hello</p>
  </div>
  <div class="parent">
      <p class="childP">bro
  </div>
  <div class="parent-3">
      <p class="childP">bro
  </div>
</section>

上面的代码通过循环遍历

section.childNodes

中的每个节点创建了一个名为children的数组。如果当前节点的

nodeType

为

ELEMENT_NODE

，代表一个元素节点，则将该节点添加到children数组中。

Answer 3

childNodes

将返回目标元素的直接子节点的任何

element

或

text

或

comment

节点。

那么，问题是文本节点来自哪里？！

div

s 元素之间的新行被视为文本节点。

如果删除新行，将没有文本节点。

console.log([...document.querySelector('.section1').childNodes].map(e => e.nodeName))

<section class="section1"><div class="parent"><p class="childP">hello</p></div><div class="parent"><p class="childP">bro</div><div class="parent-3"><p class="childP">bro</div></section>