Javascript点击某个div下的按钮功能

Question

这是一个 html 页面中按钮的代码

<a class="btn" role="button" href="#">Click me</a>

我有这个 JavaScript 代码来单击具有特定类的按钮

var clickBtn = document.getElementsByClassName('btn'); 
for(var i=0;i<clickBtn.length;i++)
{ 
clickBtn[i].click(); 
} 

此代码单击所有页面中带有“btn”类的每个按钮。但同一页面中还有一些具有相同类别的其他按钮。所以我希望修改我的 javascript 代码以单击仅特定 div 中的特定按钮。

带有div的代码是

<div class="inside">
<span>
<a class="btn" role="button" href="#">Click me</a>
</span>
</div>

知道如何修改我的 javascript 代码以仅单击该 div 内的按钮吗？感谢您抽出时间。

Answer 1

您可以使用querySelectorAll()

Array.from(document.querySelectorAll('.inside  .btn')).forEach(btn => {      
   alert(btn.innerHTML)
   btn.click();
});

或者没有 es6:

[].slice.call(document.querySelectorAll('.inside  .btn')).forEach(function(btn) {
    alert(btn.innerHTML)
    btn.click();
});

DEMO

更新了您的评论(您能否更新您的代码，如果跨度中有一个 id，则不要单击按钮？):

[].slice.call(document.querySelectorAll('.inside  .btn')).forEach(function(btn) {

    if (btn.parentNode.id != 'clicked') {
        alert(btn.innerHTML);
        btn.click();
    }

});

或者您可以使用带有 :not 条件的 querySelectorAll() 来避免 if 检查:

Array.from(document.querySelectorAll('.inside span:not([id="clicked"]) .btn'))
    .forEach(btn => {
        alert(btn.innerHTML)
        btn.click();
    });