如何通过文本关键词查找对应外层HTML元素并获取其className？

问题背景 #

需要匹配文本关键词COMPUTIME，从嵌套的HTML结构中定位到最外层的包裹div，并读取它的className属性，涉及的HTML结构如下：

<div class="col-sm-6 col-md-6 col-lg-4">
    <div class="ct-itemProducts ct-u-marginBottom20" >
        <div class="ct-main-content">
            <div class="ct-main-text" >
                <div class="ct-product--tilte">
                    COMPUTIME
                </div>
            </div>
        </div>
    </div>
</div>

目标定位的元素是class为col-sm-6 col-md-6 col-lg-4的最外层div。

实现方案（原生JavaScript） #

整体逻辑分两步：先定位到包含目标关键词的文本节点元素，再向上遍历DOM树找到目标外层元素即可，代码如下：

// 定义匹配关键词
const KEYWORD = 'COMPUTIME'

// 第一步：找到包含目标关键词的元素
// 这里通过产品标题类做初步筛选，缩小查找范围，也可以根据实际场景调整选择器
const matchedTextEl = Array.from(document.querySelectorAll('.ct-product--tilte'))
  .find(el => el.textContent.trim() === KEYWORD)

if (!matchedTextEl) {
  console.warn('未找到匹配对应关键词的元素')
} else {
  // 第二步：向上查找目标外层元素，推荐用closest方法，容错率更高
  // 方式1：通过目标元素的类特征匹配，不受中间层级变动影响
  const targetEl = matchedTextEl.closest('div[class*="col-sm-6"]')
  
  // 方式2：如果DOM结构固定不会变动，也可以按层级向上找
  // const targetEl = matchedTextEl.parentElement.parentElement.parentElement.parentElement

  // 读取className属性值
  const targetClassName = targetEl.className
  console.log('目标元素className：', targetClassName) 
  // 输出: col-sm-6 col-md-6 col-lg-4
}

注意事项 #

• 匹配文本内容时必须调用trim()方法去除首尾的空白字符，HTML排版带来的换行、缩进空格会导致直接全等匹配失败
• 优先使用Element.closest()方法做父级查找，相比逐层写parentElement的方式，不会因为中间新增/减少一层DOM节点就导致逻辑失效
• 如果页面存在多个匹配关键词的条目，把find改成filter循环处理每个匹配项即可

内容的提问来源于stack exchange，提问作者med kalil ben ahmed