如何使用JavaScript点击页面上所有心形SVG按钮？

你需要修改原有代码，从识别文本为"Follow"的按钮，改为识别包含特定心形SVG的按钮，以下是几种可行的解决方案：

方案1：通过心形SVG的路径值定位 #

利用你提供的SVG中唯一的路径(d属性值)来筛选目标SVG，再找到其所属的按钮并点击：

// 获取所有匹配心形路径的SVG元素
const heartSvgs = document.querySelectorAll('svg path[d="M24 9.01703C19.0025 3.74266 11.4674 3.736 6.67302 8.56049C1.77566 13.4886 1.77566 21.4735 6.67302 26.4016L22.5814 42.4098C22.9568 42.7876 23.4674 43 24 43C24.5326 43 25.0432 42.7876 25.4186 42.4098L41.327 26.4016C46.2243 21.4735 46.2243 13.4886 41.327 8.56049C36.5326 3.736 28.9975 3.74266 24 9.01703ZM21.4938 12.2118C17.9849 8.07195 12.7825 8.08727 9.51028 11.3801C6.16324 14.7481 6.16324 20.214 9.51028 23.582L24 38.1627L38.4897 23.582C41.8368 20.214 41.8368 14.7481 38.4897 11.3801C35.2175 8.08727 30.0151 8.07195 26.5062 12.2118L26.455 12.2722L25.4186 13.3151C25.0432 13.6929 24.5326 13.9053 24 13.9053C23.4674 13.9053 22.9568 13.6929 22.5814 13.3151L21.545 12.2722L21.4938 12.2118Z"]');

// 遍历每个SVG，找到最近的按钮父元素并点击
heartSvgs.forEach(svg => {
  const button = svg.closest('button');
  if (button) {
    button.click();
  }
});

方案2：通过SVG的viewBox属性定位 #

如果页面中只有点赞按钮的SVG使用viewBox="0 0 48 48"，可以用这个属性简化筛选：

const heartSvgs = document.querySelectorAll('svg[viewBox="0 0 48 48"]');

heartSvgs.forEach(svg => {
  const button = svg.closest('button');
  if (button) {
    button.click();
  }
});

方案3：遍历所有按钮并检查内部SVG #

延续你原有代码的遍历逻辑，改为检查按钮内是否包含目标SVG：

const buttons = document.getElementsByTagName('button');
for (let i = 0; i < buttons.length; i++) {
  // 检查按钮内是否存在指定viewBox的SVG
  const targetSvg = buttons[i].querySelector('svg[viewBox="0 0 48 48"]');
  // 也可以用路径值检查：
  // const targetPath = buttons[i].querySelector('svg path[d="M24 9.01703..."]');
  if (targetSvg) {
    buttons[i].click();
  }
}

说明 #

• closest('button')方法会向上查找当前元素最近的button父元素，能适配SVG嵌套在按钮内部子元素中的情况
• 优先使用路径值(d属性)筛选，因为它的唯一性比viewBox更高，避免误触其他同viewBox的SVG按钮

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