Accessing a child class from parent class javascript

Question

<td <td class="upgrade_building b_wall">
    <a href="#" class="building_tooltip d_0" tooltip="<span class='icon header wood'></span> 801 <span class='icon header stone'></span> 1846 <span class='icon header iron'></span> 320<br />Población: 5<br />Tiempo de construcción: 3:12:01">10
    </a>
</td>

I'm making a script to perform a autoclick on the element "building_tooltip d_0" contained within a "upgrade_building b_wall" I tried this code:

javascript:var list = document.getElementsByClassName("building_tooltip d_0");
for (var i=0; i<list.length; i++) list[i].click();

But in the DOM of the page there are other elements with "building_tooltip d_0" I do not want to run, I just want to run the "upgrade_building b_wall".

Can anybody help me?

Answer 1

You can use document.querySelectorAll, which is supported in modern browsers:

var list = document.querySelectorAll(".upgrade_building.b_wall > .building_tooltip.d_0");
for (var i=0; i<list.length; i++) {
    list[i].click();
}

Alternatively you can use an if statement to check that the node has the correct parent before you perform the click on it:

var list = document.getElementsByClassName("building_tooltip d_0");
for (var i=0; i<list.length; i++) {
    if (list[i].parentNode.className === "upgrade_building b_wall") list[i].click();
}