如何在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>

按钮如下所示：

现在，我想使用名称来按名为更新的按钮（但我也非常想知道它是否在不使用其名称的情况下起作用）。

我已经尝试遍历该类并使用循环收集名称：

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>

Answer 2

由于类选择器可在父div上使用，因此您还需要在子元素上循环以获取按钮。

这确实是一个糟糕的设计。如果您有能力更改html，请这样做。

var mainElement = document.getElementsByClassName("listit");
for (var i = 0; i < mainElement.length; i++) {
  var children = mainElement[i].childNodes;
  for (var j = 0; j < children.length; j++) {
    if (children[j].innerText == "Update") {
      console.log('found by innertext');
      console.log(children[j]);
    }
  }
}

<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>

如果您可以选择的话，甚至可以通过href属性获取元素。很难，这看起来也很狡猾。

var element = document.querySelector('.listit a[href="javascript:dB()');
console.log(element);

<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>

这是按钮的工作方式。通过将javascript:放在href中，按钮将执行href之后的:部分。因此，在这种情况下，dB()意味着执行名为db的函数。

function dB() {
  console.log('update button pressed');
}

<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>

Answer 3

您将创建一个mouseEvent并使用dispatchEvent来触发它。 （您还需要遍历listit的孩子，而不是div本身）：

var dB = function() {console.log("CLICKED")}

var x = document.getElementsByClassName("listit")[0].children;
for (var i = 0; i < x.length; i++) {
  var counter = x[i].innerText;
  if (counter == "Update") {
    x[i].dispatchEvent(
      new MouseEvent('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></a>
</div>