如何使用Javascript在DOM上查找并单击此元素？

Question

我有这个元素，我需要点击。每次按钮出现时，id都不是常量并且不同地重新生成。按类搜索会提供太多选项。什么是找到它并点击它的好方法？元素：

<input type="button" class="simpleInputPushButton" value=OK id="ext-gen141">

只是为了澄清，我正在使用selenium来自动化网站，由于某种原因，Selenium将此元素显示为未显示，因此我需要使用JS。在这种情况下，Jquery将成为可能。

Answer 1

你可以通过它的value获得该元素。我相信元素的value将是相同的：

var elem = document.querySelector('input[value=OK]');
console.log(elem);
//then assign click event
elem.addEventListener('click', function() {
  console.log('clicked elem with id ' + this.id);
})

<input type="button" class="simpleInputPushButton" value=OK id="ext-gen141">

Answer 2

你可以使用document.querySelector获取元素。随附的onclick仅供测试

let m = document.querySelector('input[value="OK"]').click()

function test() {
  alert('Hello')
}

<input type="button" class="simpleInputPushButton" onclick='test()' value='OK' id="ext-gen141">

Answer 3

通过ID获取此元素并触发其上的单击事件

document.getElementById('ext-gen141').click();

Answer 4

您可以使用选择器组合唯一地唯一标识元素：

• 基于父选择器： div.parentClassName input[type="button"].simpleInputPushButton
• 基于部分属性值匹配： 以。。开始 input[type="button"][id^="ext-gen"].simpleInputPushButton 以。。结束 input[type="button"][id$="-141"].simpleInputPushButton 包含 input[type="button"][id~="gen"].simpleInputPushButton