前端开发必备：三种高效定位动态类名元素的 JavaScript 技巧

洛小豆

于 2024-09-28 10:51:00 发布

阅读量258

点赞数 8

分类专栏：前端文章标签： javascript 前端面试开发语言

本文链接：https://blog.csdn.net/weixin_43242942/article/details/142612399

版权

前端专栏收录该内容

16 篇文章 2 订阅

订阅专栏

前几天在开发一个前端项目时，我遇到了一个问题：页面上有多个 div，它们的 class 名都以相同的前缀开头，后面部分则是随机生成的，比如 class="xiaodou___abab"。我需要通过 JavaScript 精确定位这些 div，但由于后缀部分是动态变化的，无法使用固定的类名进行选择。这种情况下，如何才能准确地通过类名前缀定位到这些 div 元素呢？

解决方案

这个问题其实非常常见，特别是在使用一些组件库或者构建工具生成的类名时。经过查找和实验，我找到了几种解决方案，接下来我会逐一分享它们的实现方法和适用场景，这里主要有三种解决方案：

简单前缀匹配：使用 querySelectorAll 和 ^=
手动过滤：结合 getElementsByClassName 或 querySelectorAll 手动筛选
复杂匹配逻辑：使用正则表达式实现复杂匹配

方法 1：使用 `querySelectorAll` 和属性选择器 `^=`（推荐）

首先，最直接也是最推荐的解决方案就是使用 querySelectorAll 和属性选择器 ^=。这是 CSS 选择器中非常实用的一部分，^= 表示“以特定字符串开头”。通过这种方式，可以非常方便地选择所有具有相同前缀的类名元素。

// 选择所有以 'xiaodou___' 开头的类名元素
const elements = document.querySelectorAll('[class^="xiaodou___"]');

// 遍历所有匹配的元素并输出
elements.forEach(element => {
  console.log(element);
});

适用场景：

当类名前缀是固定的，且后缀部分动态变化。
需要在多个元素中快速选择匹配特定前缀的元素。

这个方法最大的优势是简洁易懂，代码量少，且性能较好。因为 querySelectorAll 是浏览器原生支持的，它可以高效地查询 DOM 元素。

方法 2：使用 `getElementsByClassName` 并手动过滤

第二种方案是通过 getElementsByClassName 来获取所有的元素，然后手动过滤出符合条件的那些。这种方法的好处是，它适用于那些可能不完全满足某个前缀模式的元素。虽然 getElementsByClassName 不支持前缀匹配，但我们可以手动检查每个元素的 className 属性。

// 获取页面上所有的 `div` 元素
const allDivs = document.getElementsByTagName('div');

// 过滤出类名以 'xiaodou___' 开头的元素
const matchingDivs = Array.from(allDivs).filter(div => div.className.startsWith('xiaodou___'));

console.log(matchingDivs);

适用场景：

当你只想查找某个特定标签（如 div）下的元素。
你想手动处理类名的复杂变化，比如仅匹配多个前缀中的一个。

这个方法虽然灵活，但相比于 querySelectorAll，它需要手动处理每个元素的 className，代码稍显冗长，并且在处理大规模元素时性能可能会受到影响。

方法 3：使用正则表达式匹配类名

第三种方法适用于类名规则更加复杂的情况。假如类名前缀和后缀之间存在更多的变动因素，比如某些前缀的中间部分还包含动态生成的字符，这时我们可以通过正则表达式匹配类名。

// 获取页面上所有的 `div` 元素
const allDivs = document.querySelectorAll('div');

// 使用正则表达式过滤出类名符合条件的元素
const matchingDivs = Array.from(allDivs).filter(div => {
  return /^xiaodou___/.test(div.className);
});

console.log(matchingDivs);