原生JS实现查找含指定单词的元素并输出带索引的层级路径

我来帮你搞定这个需求！要在原生JavaScript中输出符合要求的完整层级路径（包含子元素索引和目标元素文本），我们可以通过元素遍历+路径回溯的方式实现，全程不需要依赖任何第三方库。

核心思路 #

1. 定位根元素：先获取id为okz的根容器，作为路径的起点。
2. 筛选目标元素：遍历根元素下的所有子元素，找出包含指定关键词的元素。
3. 回溯层级路径：从每个目标元素向上遍历到根元素，同时计算每个节点在父元素中的子元素索引（从1开始计数）。
4. 拼接路径字符串：按照根元素(索引)>父元素(索引)>...>目标元素文本的格式拼接路径。

完整实现代码 #

// 辅助函数：获取元素在父元素的元素节点中的索引（从1开始计数）
function getElementIndex(el) {
  let index = 0;
  let sibling = el.previousElementSibling;
  // 遍历所有前序兄弟元素节点
  while (sibling) {
    index++;
    sibling = sibling.previousElementSibling;
  }
  return index + 1;
}

// 构建单个元素的完整层级路径
function buildElementPath(targetEl, rootId) {
  const pathSegments = [];
  let currentEl = targetEl;
  const rootEl = document.getElementById(rootId);

  // 从目标元素向上回溯到根元素
  while (currentEl && currentEl !== rootEl.parentNode) {
    if (currentEl === rootEl) {
      // 根元素：添加id+索引
      pathSegments.unshift(`${currentEl.id}(${getElementIndex(currentEl)})`);
    } else {
      const tagName = currentEl.tagName.toUpperCase();
      if (currentEl === targetEl) {
        // 目标元素：显示标签名+格式化文本
        const cleanText = currentEl.textContent.trim();
        pathSegments.unshift(`${tagName} string named:-${cleanText}`);
      } else {
        // 中间节点：添加标签名+索引
        pathSegments.unshift(`${tagName}(${getElementIndex(currentEl)})`);
      }
    }
    currentEl = currentEl.parentNode;
  }

  return pathSegments.join('>');
}

// 查找根元素下所有包含指定文本的元素
function findTargetElements(rootId, targetText) {
  const rootEl = document.getElementById(rootId);
  const targetElements = [];
  // 使用TreeWalker高效遍历所有元素节点
  const treeWalker = document.createTreeWalker(
    rootEl,
    NodeFilter.SHOW_ELEMENT,
    null,
    false
  );

  let currentNode;
  while ((currentNode = treeWalker.nextNode())) {
    // 检查元素文本是否包含目标关键词
    if (currentNode.textContent.includes(targetText)) {
      targetElements.push(currentNode);
    }
  }

  return targetElements;
}

// ------------------- 使用示例 -------------------
// 指定要查找的关键词
const targetKeyword = 'points';
// 获取所有符合条件的元素
const matchedElements = findTargetElements('okz', targetKeyword);
// 输出每个元素的完整路径
matchedElements.forEach(el => {
  const fullPath = buildElementPath(el, 'okz');
  console.log(fullPath);
  // 也可以输出到页面
  // document.body.innerHTML += `<p>${fullPath}</p>`;
});

代码说明 #

1. getElementIndex函数：通过遍历元素的previousElementSibling，计算它在父元素的所有元素节点中的位置，确保索引从1开始（符合你给出的示例格式）。
2. buildElementPath函数：从目标元素向上回溯，把每个节点的信息插入到路径数组的开头（保证路径顺序是从根到目标元素），最后用>拼接成完整路径。
3. findTargetElements函数：使用TreeWalker遍历根元素下的所有元素节点，比querySelectorAll更高效，能精准筛选出包含指定文本的元素。
4. 格式适配：对目标元素特殊处理，输出标签名 string named:-文本内容的格式，完全匹配你给出的示例。

示例输出 #

如果你的DOM结构是：

<body>
  <div id="other"></div>
  <div id="okz">
    <ul></ul>
    <ul>
      <li></li>
      <li><a href="#">points</a></li>
    </ul>
  </div>
</body>

运行代码后会输出：

okz(2)>UL(2)>LI(2)>A string named:-points

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