Get Element von Klassennamen innerhalb bestimmter div

Question

Ich versuche, einige Tasten auf einer Seite zu klicken, die diesen HTML Code nur der div Klasse zu nehmen, so

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

, was ich habe versucht ist, hat a

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

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

Gibt es trotzdem die Schaltfläche mit dem Klassennamen b, aber nur die, die innerhalb der div mit Klassennamen ist a ??

P.S. Ich habe auch versucht, und diese

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

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

aber ich bekomme ein leeres Array [ ] als Antwort, wenn ich console.log(buttons)

Answer 1

Sie können querySelector verwenden, um das Problem zu beheben.

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

Answer 2

Da nur ein div der class='a' zugewiesen wird, können Sie entweder eine ID liefern stattdessen oder, Sie können dies tun:

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>

Dies funktioniert perfekt, hier ist es: https://jsfiddle.net/nd8m7mms/4/

Answer 3

können Sie jQuery verwenden und tun

var Tasten = $ ('a> .B.');

Answer 4

Hier ist ein XPath-Lösung:

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>

Leider Internet Explorer still doesn't support the XPath API.