Javascript 使用脚本单击基于div id和值的按钮

我有以下情况。我需要根据div的id，在div下单击off value按钮来模拟一个按钮

<div id="deviceControls1">
<button value="Off">Off</button>
<button value="On" class="active">On</button>
</div>

<div id="deviceControls2">
<button value="Off">Off</button>
<button value="On" class="active">On</button>
</div

---

我不知道如何使用javascript获得此结果，请尝试以下方法：

var buttons = document.getElementById('deviceControls2').getElementsByTagName('button');
for (var i = 0; i < buttons.length; i++) {
    if (buttons[i].value == 'Off') { 
        buttons[i].click();
    }
}

---

您可能会发现此链接很有用：

例如，要模拟在stackoverflow中单击“标记”链接，您可以

  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
var navTags = document.getElementById('nav-tags'); 
var canceled = !navTags.dispatchEvent(event);

---

这篇文章经过编辑，下面是我使用旧API的旧答案

您可以执行以下操作：

var event = document.createEvent("MouseEvents");
event.initEvent('click', true, true);
var element =  document.getElementById('deviceControls2').getElementsByValue('Off');
element.dispatchEvent(event);

---

您已经包含了jQuery标记，因此如果使用jQuery，可以执行以下操作：

$('#deviceControls2 > button[value="Off"]').click();

---

非常感谢！我只是好奇，在JS中真的并没有更干净的方法吗？我想这就是为什么jQuery如此流行的原因，这正是jQuery所做的，抽象出一点JavaScript…；）querySelectorAll（）会成功的cleaner@mahdilamb请给我看看

var event = document.createEvent("MouseEvents");
event.initEvent('click', true, true);
var element =  document.getElementById('deviceControls2').getElementsByValue('Off');
element.dispatchEvent(event);

$('#deviceControls2 > button[value="Off"]').click();