如何用纯JavaScript搜索DOM中的自定义链接属性及指定属性值元素？

嘿，你之前用getElementsByTagName('action_click')肯定找不到目标元素啦！这个方法是用来按标签名（比如<a>、<div>这类HTML标签）查找元素的，根本不是用来匹配属性的，难怪会失败～

其实不用正则表达式也能轻松找到带自定义属性的元素，下面给你几种实用的方法：

1. 最便捷的方法：使用属性选择器（推荐） #

JavaScript的querySelector和querySelectorAll支持CSS属性选择器语法，直接就能精准匹配自定义属性和对应值：

• 找单个匹配元素：用querySelector，返回第一个符合条件的元素
• 找所有匹配元素：用querySelectorAll，返回一个元素集合

针对你的例子，代码可以这么写：

// 找到单个action_click="LikePost"的元素
const likeButton = document.querySelector('[action_click="LikePost"]');

// 如果要给这个按钮加点击事件
likeButton?.addEventListener('click', function(e) {
  e.preventDefault(); // 阻止默认的跳转行为
  console.log('执行点赞操作');
});

// 如果页面有多个相同属性的元素，用querySelectorAll遍历
const allLikeButtons = document.querySelectorAll('[action_click="LikePost"]');
allLikeButtons.forEach(button => {
  button.addEventListener('click', function(e) {
    e.preventDefault();
    console.log('点赞按钮被点击');
  });
});

2. 补充：更规范的自定义属性写法 #

虽然你用action_click也能工作，但HTML规范里推荐用data-*前缀的自定义属性，比如把属性改成data-action-click="LikePost"，这样既符合标准，还能通过元素的dataset属性更方便地读取值：

<a class="like_button" href="#" data-action-click="LikePost">I Like It</a>

对应的查找代码：

const likeButton = document.querySelector('[data-action-click="LikePost"]');
// 读取属性值
console.log(likeButton.dataset.actionClick); // 输出 "LikePost"

什么时候需要正则表达式？ #

一般情况下用上面的属性选择器就足够了，但如果需要模糊匹配属性值（比如属性值包含某个字符串、以特定字符开头/结尾），可以用CSS的模糊属性选择器，比如：

• [action_click*="Like"]：匹配属性值包含"Like"的元素
• [action_click^="Like"]：匹配属性值以"Like"开头的元素
• [action_click$="Post"]：匹配属性值以"Post"结尾的元素

只有当这些CSS选择器满足不了你的复杂匹配需求时，才需要结合正则表达式遍历元素判断，比如：

// 遍历所有a标签，用正则匹配属性值
const allLinks = document.getElementsByTagName('a');
for (const link of allLinks) {
  const actionValue = link.getAttribute('action_click');
  if (/Like.+/i.test(actionValue)) { // 正则匹配以Like开头的属性值（不区分大小写）
    console.log('找到匹配的元素:', link);
  }
}

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