检查子元素是元素还是文本答案

【问题标题】：Check if a children is element or text检查子元素是元素还是文本
【发布时间】：2022-12-06 22:03:59
【问题描述】：

我有一些 HTML，看起来像这样：

<div class='parent'>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultrices massa nec velit maximus efficitur. Fusce luctus augue elit, ac varius magna tincidunt ac.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

或者

<div class='parent'>
  <h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultrices massa nec velit maximus efficitur. Fusce luctus augue elit, ac varius magna tincidunt ac.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </h1>
</div>

我想检查具有“parent”类的 div 的子节点是文本节点还是元素。

我尝试使用 nodeType 但由于某种原因它总是返回 3。就好像它们各自的子节点始终是文本节点一样。

const element = document.querySelector('.parent');
const childNode = element.childNodes[0];
if (childNode.nodeType === 3) {
  console.log('The child node is a text node.');
} else {
  console.log('The child node is not a text node.');
}

【问题讨论】：

试试childNode.nodeName - 在你的情况下它得到 H1 而不是整数值
空白通常也是文本类型的子元素，而第二个子元素可以是元素节点。
为什么在这两种情况下都将文本类型的 childNode 作为第一个子节点的原因也是因为在有嵌套的 h1 子节点的情况下，第一个子节点是文本节点内的新行。所以也许你的支票应该更进一步并检查 .children 属性
developer.mozilla.org/en-US/docs/Web/API/Node/childNodes:“重要的是要记住，childNodes 包括所有子节点，包括非元素节点，如文本和注释。要获取仅包含元素的集合，请改用 Element.children。”所以你应该能够只使用if (!element.children.length)，如果你只是想确定一个元素是否包含任何孩子，或只有文字。（在后一种情况下，该元素可能仍然是完全空的——如果您需要以不同的方式处理它，您仍然需要检查它。）

标签： javascript

【解决方案1】：

您应该遍历所有子节点并检查 nodeType。虽然通常有文本节点，但元素节点也应该作为子节点可用。

【讨论】：

【解决方案2】：

Node可以是text节点或element节点。 element 节点不能是 text 节点。
element.children 将始终返回 element 节点
element.childNodes 将同时返回element 和text 节点。

HTMLLiveCollection 和NodeList 都定义了Symbol.iterator，所以你可以这样做：

const el = document.querySelector('.parent'),
      sortEls = (el) => {
        children: [...el.children], 
        textNodes: [...el.childNodes].filter(d => d.nodeType === 3)
      };
sortEls(el);//...children and text nodes

您不需要错误检查，它们将始终返回空数组，以防没有子节点/节点。

【讨论】：