如何递归通过类名查找嵌套div内的指定元素且不使用querySelector

架构老林

2026-10-5

问题核心原因

递归遍历子元素时使用了forEach方法，该方法无法中途终止遍历，即使某个子树中找到了目标元素，后续其他子树返回的null会覆盖已经得到的正确目标值
当直接子元素未匹配到目标，进入递归分支完成遍历后，没有显式返回found变量，函数该分支最终默认返回undefined

提示：你提供的HTML示例存在标签闭合错误，所有span元素的结束标签误写为</div>，实际运行时需要修正，否则DOM结构解析异常会影响查找结果。

修复后的代码

function getElem(cell, name) {
  let found;
  // 校验当前元素是否为目标
  if (cell.classList.contains(name)) return cell;
  // 无后代元素直接返回空
  if (cell.children.length === 0) return null;

  // 优先查找当前层级的直接子元素
  found = Array.from(cell.children).find(element => element.classList.contains(name));
  if (found) return found;

  // 直接子元素未找到，递归遍历每个子元素的后代，找到即终止
  Array.from(cell.children).some(element => {
    found = getElem(element, name);
    return found !== null;
  });

  // 返回最终查找结果
  return found;
}

// 调用测试
console.log(getElem(document.getElementById("block-one"), "main-tag"));