通过类名获取元素一定格

Question

我想点击其中有这样的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内的一个？

P.S.我也试过这

var buttons = document.getElementsByClassName('a').getElementsByTagName('span').getElementsByClassName('b'); 

    for(var i = 0; i <= buttons.length; i++) 
     buttons[i].click(); 

，但我得到一个空数组[ ]作为回应时，我console.log(buttons)

Answer 1

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

document.querySelectorAll("div.a a.b");

Answer 2

由于只有一个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/

Answer 3

您可以使用jQuery做

VAR键= $（ 'A> .B。'）;

Answer 4

这里是一个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 still doesn't support the XPath API。