javascript - 你如何在 javascript 中通过其内部文本单击按钮？

Question

我有以下一段 html 代码:

<div class ="listit">
  <a href="javascript:dB()">Update</a>
  <a href="post.php?f=54&y=5">New iso</a>
  <a href="post.php?f=54&y=2">New check></a>
</div>

按钮看起来像这样:

现在我喜欢使用它的名称来按下名为 更新 的按钮(但我也很想看看它是否可以在不使用它的名称的情况下工作)。

我已经尝试通过类(class)并使用循环收集名称:

var x = document.getElementsByClassName("listit");
for (var i = 0; i < x.length; i++) {
  var counter = x[i].innerText;
  if(counter == "Update"){

  }
}

而且我想我几乎已经掌握了，只是找不到使用该 click() 函数的有效方法，所以我按名称单击按钮更新？没有像 document.getElementByInnerText() 这样的东西吗？我不知道如何获得这项工作..？ :S

Answer 1

您正在选择周围的 div(它实际上具有 CSS 类 listit)，而不是其中的链接。

var x = document.getElementsByClassName("listit");

console.log(x);

<div class ="listit">
  <a href="javascript:dB()">Update</a>
  <a href="post.php?f=54&y=5">New iso</a>
  <a href="post.php?f=54&y=2">New check&gt;</a>
</div>

如果您需要链接的集合，请使用 document.querySelectorAll('.listit a'):

function dB() {
  console.log('dB called');
}

const links = Array.from(document.querySelectorAll('.listit a'));

links.forEach((link) => {
  if (link.textContent === 'Update') {
    link.click();
  }
})

<div class ="listit">
  <a href="javascript:dB()">Update</a>
  <a href="post.php?f=54&y=5">New iso</a>
  <a href="post.php?f=54&y=2">New check&gt;</a>
</div>

旁注:有些字符需要用其所谓的 HTML 实体替换才能在 HTML 标记内容中使用，最重要的是这些:

&<>

所以我替换了你的

<a href="post.php?f=54&y=2">New check></a> 

由

<a href="post.php?f=54&y=2">New check&gt;</a>