如何判断class为parent的div子节点是文本节点还是元素节点？

你遇到的问题根源在于 childNodes 会返回所有类型的子节点，包括HTML代码里的空白字符（换行、空格、制表符）——这些空白会被浏览器解析成文本节点（nodeType=3）。比如第二种结构里，div和h1之间的换行/空格就是一个空白文本节点，导致你取 childNodes[0] 时总是拿到它。

下面是几种可行的解决方法：

方法1：用children获取仅元素节点 #

children 属性只返回元素类型的子节点，完全忽略文本节点（包括空白）：

const element = document.querySelector('.parent');
const firstChildElement = element.children[0];
if (firstChildElement) {
  console.log('子节点是元素节点');
} else {
  // 检查是否存在非空白的文本节点
  const hasValidText = Array.from(element.childNodes).some(node => 
    node.nodeType === 3 && node.textContent.trim() !== ''
  );
  if (hasValidText) {
    console.log('子节点是文本节点');
  } else {
    console.log('没有有效子节点');
  }
}

方法2：用firstElementChild直接定位第一个元素节点 #

firstElementChild 是 children[0] 的简写，写法更简洁：

const element = document.querySelector('.parent');
if (element.firstElementChild) {
  console.log('子节点是元素节点');
} else {
  // 查找非空白文本节点
  const validTextNode = Array.from(element.childNodes).find(node => 
    node.nodeType === 3 && node.textContent.trim() !== ''
  );
  if (validTextNode) {
    console.log('子节点是文本节点');
  }
}

方法3：手动过滤childNodes中的空白文本节点 #

如果需要保留对所有节点的控制权，可以手动过滤掉无效的空白文本：

const element = document.querySelector('.parent');
const validChildNodes = Array.from(element.childNodes).filter(node => {
  // 过滤空白文本节点
  if (node.nodeType === 3) {
    return node.textContent.trim() !== '';
  }
  return true;
});

if (validChildNodes.length > 0) {
  const firstValidNode = validChildNodes[0];
  if (firstValidNode.nodeType === 3) {
    console.log('子节点是文本节点');
  } else {
    console.log('子节点是元素节点');
  }
}

内容的提问来源于stack exchange，提问作者Marius Gardelli