时间戳

首页 > 解决方案 > 什么是意外的文本节点？

javascript - 什么是意外的文本节点？

问题描述

我有一个仅包含一个子元素的父元素，据我所知，该父元素有一个子节点，但在控制台中有三个节点，其中两个是文本节点。这在这张图片中很清楚。javascript中意外的tex节点 现在我的问题是：

1.这个文本节点是从哪里来的？

  1. 这些文本节点是内置的吗？它们的必要性是什么？

  2. 他们的规则是什么？

var container = document.getElementById('container');
var children = container.childNodes;
console.log(children);
<div id="container">
  <div id='test'></div>
</div>

标签： javascript

解决方案

其中两个childNodes是换行符。来自 MDN：

childNodes包括所有子节点，包括非元素节点，如文本和评论节点。要获取仅包含元素的集合，请ParentNode.children改用。

如果您不明白我的意思，请参阅以下代码段的输出：

var container = document.getElementById('container');
var chlds = container.childNodes;
chlds.forEach(c => console.log(c.nodeName + ":" + c.innerText));
<div id="container">
  <div id='test'></div>
</div>

为了回答您的后续问题，由于文档具有换行符（或其他非元素标记），文本节点就存在于文档中。children是获取元素子节点的一种更可靠的方法，因为childNodes输出在未缩小和缩小的 HTML 代码之间可能会有所不同，这可能会让您有些头疼。

推荐阅读