JavaScript如何判断DOM元素属性是否匹配指定值

参考示例HTML结构：

<div class="wrapper">
   <a href=#refresh-cart>view cart</a>
</div>

除了hasAttribute()仅判断属性存在的能力外，有三种常用方案可以直接校验属性的具体值，精准匹配预期：

• 方案1：getAttribute() 取值后做严格相等判断
  这是最通用的无兼容问题方案，getAttribute()会返回HTML源码中书写的属性原始字符串值，不会被浏览器自动解析转换，匹配静态属性值时准确率最高。
  改造后的事件监听代码如下：

  document.addEventListener('click', e => {
    // 校验href属性值完全等于预期值
    if (e.target.getAttribute('href') === '#refresh-cart') {
      // 仅属性值完全匹配时才会执行对应逻辑
      console.log('命中刷新购物车链接')
    }
  })
  

• 方案2：直接读取DOM元素的内置属性
  对于标准DOM属性，可以直接通过元素实例的同名属性取值，比如id、className、dataset自定义属性等。注意部分属性会被浏览器自动解析，比如<a>标签的href属性直接读取时会返回拼接了当前域名的完整绝对路径，不适合匹配原始相对路径/锚点值，更适合校验不会被改写的属性：

  // 校验自定义data属性场景示例
  document.addEventListener('click', e => {
    if (e.target.dataset.role === 'cart-refresh') {
      // 匹配 <a data-role="cart-refresh"> 元素
    }
  })
  

• 方案3：matches() 方法配合CSS属性选择器
  这是写法最简洁的方案，直接通过CSS选择器语法完成属性存在+值匹配的双重校验，还支持灵活的模糊匹配规则：

  document.addEventListener('click', e => {
    // 精准匹配href属性等于#refresh-cart的a标签
    if (e.target.matches('a[href="#refresh-cart"]')) {
      console.log('选择器匹配命中目标元素')
    }
  })
  

  支持的常用属性匹配语法：
  • [attr="val"]：属性值完全等于val
  • [attr*="val"]：属性值包含val字符串
  • [attr^="val"]：属性值以val开头
  • [attr$="val"]：属性值以val结尾

注意：所有属性值判断建议使用严格相等符===，避免松散相等==的隐式类型转换引发误判，比如字符串"1"和数字1被错误判定为相等的问题。

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