在某个div中按类名获取元素

我正试图点击一个页面中的一些按钮，该页面包含以下html代码

<div class="a">
  <span>
   <a class="b" role="button">test</a>
  </span>
</div>

所以我尝试的是只使用div的类a

 var buttons = document.getElementsByClassName('a').getElementsByClassName('b');
 for(var i = 0; i <= buttons.length; i++)  
     buttons[i].click();

有没有办法得到类名为b的按钮，但只得到类名为a的div内的按钮？？

附言：我也试过了，这个

var buttons = document.getElementsByClassName('a').getElementsByTagName('span').getElementsByClassName('b');
     for(var i = 0; i <= buttons.length; i++)  
         buttons[i].click();

但是当我console.log(buttons)

时，我得到一个空数组[ ]作为响应

您可以使用querySelector来解决这个问题。

document.querySelectorAll（"div.aa.b"）；

您可以使用jquery并执行

var buttons=$（'.a>.b'）；

这里有一个XPath解决方案：

let res = document.evaluate('//*[@class="a"]//*[@class="b"]',document,null,XPathResult.ANY_TYPE,null);
res.iterateNext().click();

<div class="a">
  <span>
   <a class="b" role="button" onclick="console.log('clicked!')">test</a>
  </span>
</div>

遗憾的是，Internet Explorer仍然不支持XPath API。

由于只有一个div将被分配class='a'，您可以提供一个ID，也可以这样做：

var spans = document.getElementsByClassName('a')[0].getElementsByTagName('span');
// [0] indicates the first element with the class='a'
for(var i = 0; i < spans.length; i++)  {
    spans[i].getElementsByClassName('b')[0].click();
}

<div class="a">
  <span>
    <a class="b" role="button" href="javascript:void(0)" onclick="console.log(this.innerHTML+' was clicked !')">test 1</a>
  </span>
  <span>
    <a class="b" role="button" href="javascript:void(0)" onclick="console.log(this.innerHTML+' was clicked !')">test 2</a>
  </span>
  <span>
    <a class="b" role="button" href="javascript:void(0)" onclick="console.log(this.innerHTML+' was clicked !')">test 3</a>
  </span>
</div>

这非常有效，如下所示：https://jsfiddle.net/nd8m7mms/4/

相关内容

最新更新

热门标签：