如何使用 Javascript（没有 id 或 class）点击锚标签

Question

我正在创建一个 Javascript 小书签来填写网站上的表格以供测试（我无法修改该网站）。

我似乎无法单击列表项中包含的锚标记。所以网站结构是这样的：

<Div> 
  <ul class="exampleClass"> 
    <li class="col-xs-3 col-sm-2" value="8"><a>8th</a></li>
    <li class="col-xs-3 col-sm-2" value="9"><a>9th</a></li>
    <li class="col-xs-3 col-sm-2" value="10"><a>10th</a></li>
  </ul>
</Div>

您会注意到，锚标记没有任何 id 或 class。

我的书签看起来像这样：

javascript: 

    var newVar = {
        formFill: function() {
            document.querySelectorAll("#ReasonValue")[0].value='2';
            document.find_element_by_xpath(".//a[contains(text(), '10th')]").click();
        }
    };
    newVar.formFill()

我只需要一种方法来click/select其中一个列表项

非常感谢任何帮助。

Answer 1

您必须使用以下程序：

解析ul calss exampleClass中的li，然后解析li的锚标签，然后找到第10个文本并单击它，如下所示：

var newVar = {
  formFill: function() {
      var c = document.getElementsByClassName('exampleClass')[0].children;
      for(var i=0; i<c.length;i++)
      {
       var x = c[i].children;
       for(var j=0; j<x.length;j++)
        {
          if(x[j].innerHTML == "10th")
          {
              console.log(x[j]);
              x[j].click();
          }
        }
      }
   }
};
newVar.formFill()

<div> 
  <ul class="exampleClass"> 
    <li class="col-xs-3 col-sm-2" value="8"><a>8th</a></li>
    <li class="col-xs-3 col-sm-2" value="9"><a>9th</a></li>
    <li class="col-xs-3 col-sm-2" value="10"><a>10th</a></li>
  </ul>
</div>

但是在 a 标签中添加 href 或其他内容之前，您将看不到任何内容。

更新

添加了点击提醒：

var newVar = {
  formFill: function() {
      var c = document.getElementsByClassName('exampleClass')[0].children;
      for(var i=0; i<c.length;i++)
      {
       var x = c[i].children;
       for(var j=0; j<x.length;j++)
        {
          if(x[j].innerHTML == "10th")
          {
              console.log(x[j]);
              x[j].click();
          }
        }
      }
   }
};
newVar.formFill()

<div> 
  <ul class="exampleClass"> 
    <li class="col-xs-3 col-sm-2" value="8"><a>8th</a></li>
    <li class="col-xs-3 col-sm-2" value="9"><a>9th</a></li>
    <li class="col-xs-3 col-sm-2" value="10"><a onclick="javascript:alert('clicked');">10th</a></li>
  </ul>
</div>

Answer 2

只使用 jQuery 会更容易，但我会假设无论出于何种原因您不能使用 jQuery，只能使用 JavaScript.

我会尝试这样的事情：

document.querySelector("ul.exampleClass li[value=10] a").click();

Answer 3

简单示例：选择具有属性值的所有 li-Tag 中的所有 a-Tag，并以编程方式单击它们。您可以更改查询中的 value 属性，这样只有一项是 "clicked".

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js.js"></script>
</head>
<body>

<Div>
    <ul class="exampleClass">
        <li class="col-xs-3 col-sm-2" value="8"><a onclick="console.log('clicked 8th')">8th</a></li>
        <li class="col-xs-3 col-sm-2" value="9"><a onclick="console.log('clicked 9th')">9th</a></li>
        <li class="col-xs-3 col-sm-2" value="10"><a onclick="console.log('clicked 10th')">10th</a></li>
    </ul>    
</Div>

</body>
</html>

Javascript:

var newVar = {
    formFill: function() {
        let aTags = document.querySelectorAll("li[value] a");
        let event = new Event("click", {preventDefault: false});
        aTags.forEach((atag) => {
            atag.dispatchEvent(event);
            // or without events: atag.click();
        });
    }
};

document.addEventListener("DOMContentLoaded" , newVar.formFill);

如何使用 Javascript（没有 id 或 class）点击锚标签

How to click anchor tag using Javascript (has no id or class)

html

javascript

css

xpath

bookmarklet