通過類名獲取元素一定格

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。