如何选择所有非同类元素子节点的指定class DOM元素

要实现仅选中带有.mycard类且父元素无该类的顶层元素，同时在嵌套中断（出现非同类元素）后继续搜索分支内的目标元素，可通过迭代DOM遍历或递归遍历实现，以下是具体方案：

核心逻辑 #

• 遍历DOM树时，遇到.mycard元素直接加入结果数组
• 跳过当前.mycard元素的所有同类子元素，避免重复选中嵌套的同类元素
• 若.mycard元素包含非同类子元素，需继续遍历这些子元素，确保分支内后续的.mycard能被选中
• 支持任意深度的DOM结构（包括深度10的复杂树）

迭代实现（推荐，避免递归栈溢出） #

function getTopLevelMycards() {
  const result = [];
  // 用栈存储待遍历的元素，初始从body开始
  const traverseStack = [document.body];

  while (traverseStack.length > 0) {
    const currentNode = traverseStack.pop();
    // 倒序入栈，保证遍历顺序与DOM结构一致
    const childNodes = Array.from(currentNode.children).reverse();

    for (const child of childNodes) {
      if (child.classList.contains('mycard')) {
        // 符合条件，加入结果数组
        result.push(child);
        // 仅将非.mycard的子元素加入栈，继续遍历分支
        const nonMycardChildren = Array.from(child.children).filter(el => !el.classList.contains('mycard'));
        traverseStack.push(...nonMycardChildren.reverse());
      } else {
        // 非目标元素，直接入栈继续遍历内部
        traverseStack.push(child);
      }
    }
  }

  return result;
}

// 使用示例
const targetElements = getTopLevelMycards();
console.log(targetElements.length); // 输出8，与示例预期一致
targetElements.forEach(el => console.log(el));

递归实现 #

function getTopLevelMycardsRecursive(element = document.body, result = []) {
  for (const child of element.children) {
    if (child.classList.contains('mycard')) {
      result.push(child);
      // 仅递归非.mycard的子元素，跳过同类嵌套
      Array.from(child.children)
        .filter(el => !el.classList.contains('mycard'))
        .forEach(el => getTopLevelMycardsRecursive(el, result));
    } else {
      // 非目标元素，递归遍历其内部
      getTopLevelMycardsRecursive(child, result);
    }
  }
  return result;
}

// 使用示例
const targetElements = getTopLevelMycardsRecursive();

验证示例 #

针对提供的DOM结构，两种方法都会返回包含8个.mycard元素的数组，完全符合需求：

• 选中所有顶层（父元素无.mycard）的目标元素
• 嵌套中断后（如.mycard下出现.boo），后续的.mycard仍会被选中
• 完全跳过连续嵌套的.mycard子元素，避免重复选中

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