如何使用JavaScript查找拥有特定属性的所有元素

嘿，我懂你要解决的问题——不用提前知道元素标签，直接找出所有带有某个特定属性的元素对吧？这在原生JS里其实有几种简单靠谱的办法，我给你拆解一下：

方法一：用document.querySelectorAll()（最推荐） #

这是最直接高效的方式，利用CSS属性选择器就能精准定位。不管元素是什么标签，只要它带有你指定的属性，就能被选中。

基础用法（只要元素有该属性，不管值是什么） #

比如要找所有带有data-custom属性的元素：

// 选择所有带有data-custom属性的元素
const targetElements = document.querySelectorAll('[data-custom]');

// 遍历元素做后续操作
targetElements.forEach(element => {
  console.log('找到目标元素：', element);
  // 举个例子：给元素加个红色边框标记
  element.style.border = '1px solid #ff4444';
});

进阶用法（匹配特定属性值） #

如果需要更精准，比如只找属性值等于"test"的元素，或者值包含某个关键词的元素，可以用这些选择器：

• 精确匹配值：[data-custom="test"]
• 值以某字符串开头：[data-custom^="prefix"]
• 值包含某关键词：[data-custom*="keyword"]

示例代码：

// 找所有data-custom属性值为"test"的元素
const exactMatchElements = document.querySelectorAll('[data-custom="test"]');

// 找所有data-custom属性值包含"demo"的元素
const containsMatchElements = document.querySelectorAll('[data-custom*="demo"]');

方法二：遍历所有元素过滤（兼容老浏览器） #

如果需要兼容非常旧的浏览器（比如IE8及以下），可以先获取页面所有元素，再通过hasAttribute()方法过滤：

// 获取页面所有元素（返回HTMLCollection）
const allElements = document.getElementsByTagName('*');
// 转成数组后过滤出带有目标属性的元素
const targetElements = Array.from(allElements).filter(element => {
  return element.hasAttribute('data-custom');
});

// 遍历操作
targetElements.forEach(el => console.log(el));

小提醒 #

• querySelectorAll()返回的是NodeList，现代浏览器已经支持直接用forEach()，但如果是老浏览器，需要先转成数组（比如用Array.from()或者[...targetElements]）。
• 属性选择器对大小写敏感，如果你不确定属性名的大小写，可以考虑用方法二结合getAttribute()做不区分大小写的判断（不过这种场景比较少见）。

内容的提问来源于stack exchange，提问作者William S