如何使用原生JavaScript查找含下划线字符元素的父元素

安全阿岳

2026-8-2

原生JavaScript实现替代jQuery的:contains父元素查找

当然有原生JS的实现方式，下面是两种实用方案，完全替代你原来的jQuery写法：

方案一：基础选择器+数组过滤

这种方法逻辑和你原来的jQuery写法最接近，步骤清晰易懂：

// 1. 获取所有.class容器下的<a>标签
const targetLinks = document.querySelectorAll('.class a');
// 2. 转成数组后过滤出文本包含"_"的元素，再映射到它们的父元素
const parentElements = Array.from(targetLinks)
  .filter(link => link.textContent.includes('_'))
  .map(link => link.parentElement);

querySelectorAll('.class a') 对应jQuery的$('.class a')，返回所有匹配的元素

Array.from() 把NodeList转成数组，才能使用filter和map方法

textContent.includes('_') 替代jQuery的:contains("_")，判断元素文本是否包含下划线

parentElement 对应jQuery的.parent()，直接获取元素的直接父节点

方案二：TreeWalker高效遍历

如果页面DOM结构复杂、元素数量多，用TreeWalker可以更高效地遍历指定元素，避免不必要的DOM查询：

// 1. 先定位到目标容器
const rootElement = document.querySelector('.class');
// 2. 创建TreeWalker，只筛选符合条件的<a>标签
const walker = document.createTreeWalker(
  rootElement,
  NodeFilter.SHOW_ELEMENT, // 只遍历元素节点
  {
    acceptNode: node => {
      // 只接受<a>标签且文本包含"_"的元素
      return node.tagName === 'A' && node.textContent.includes('_') 
        ? NodeFilter.FILTER_ACCEPT 
        : NodeFilter.FILTER_SKIP;
    }
  }
);
// 3. 收集符合条件元素的父节点
const parentElements = [];
let currentNode;
while (currentNode = walker.nextNode()) {
  parentElements.push(currentNode.parentElement);
}