click() 命令在 document.getElementsByClassName() 上不起作用

Question

我正在使用 javascript 制作自动浏览器脚本，我想在此网站上使用 click() 命令，但网站上的按钮没有 ID（可以正常工作）。但是它只有一个类名。当我做document.getElementsByClassName(btn.btn-danger.btn-lg.btn-block.betButton).click() 时它不起作用。

这是我想要点击的按钮的检查：

<button class="btn btn-danger btn-lg  btn-block betButton" data-color="r">1 to 7, Win x2</button>

是否可以在按钮上使用 click() 函数？有没有办法自己分配一个ID？感谢您的任何回答:)

我不认为这是一个副本，因为我知道有什么不同。但是该按钮没有任何 Id 只有一个类名。由于这不起作用，我还能做些什么来触发 click() 事件？

Edit2 = 有 3 个按钮的类名相同，唯一的区别是按钮的文本和数据颜色，有什么方法可以操作吗？

Answer 1

getElementsByClassName 返回一个HTMLCollection，这是一个类似数组的对象。

这意味着在您的情况下，您应该获取索引 0 处的元素，理想情况下，您正在构建的应用程序应该是唯一的：

document.getElementsByClassName('btn btn-danger btn-lg btn-block betButton')[0].click()

否则，如果网站更新并且与您的选择器更改顺序匹配的元素，您的扩展程序可能会停止工作。

另请注意，正如@Barmar 指出的那样，要使用getElementsByClassName 按多个类进行过滤，您应该使用空格，而不是点。

假设你有：

<button class="a"></button>
<button class="a b"></button>
<button class="a.b"></button>

然后：

• document.getElementsByClassName('a') 将返回一个 HTMLCollection，其中包含类 a 的所有元素：[<button class="a"></button>, <button class="a b"></button>]
• document.getElementsByClassName('a b') 将返回一个 HTMLCollection ，其中包含类 a 和 b 的所有元素：[<button class="a b"></button>]
• document.getElementsByClassName('a.b') 将返回一个 HTMLCollection，其中包含类 a.b 的所有元素：[<button class="a.b"></button>]

您可以使用querySelectorAll 来使用.a.b 之类的选择器或仅使用querySelector，而不是HTMLCollection，它将仅返回与选择器匹配的第一个元素，因此您可以调用click马上就可以了：

document.querySelector('.btn.btn-danger.btn-lg.btn-block.betButton').click()

Answer 2

1. 删除.的

2. 该函数返回一个类似数组的对象，名称中有提示，因为它是复数形式，因此您必须在数组中指定一个键。

HTML

<button class="btn btn-danger btn-lg  btn-block betButton" data-color="r">1 to 7, Win x2</button>

JavaScript

document.getElementsByClassName('btn btn-danger btn-lg  btn-block betButton')[0].style.backgroundColor = 'red';

示例

JSFiddle

注意...

从example 中可以看出，您需要删除. 才能正常工作，因为 JavaScript 已经知道您正在通过正在使用的函数选择类。

使用querySelector

JavaScript

document.querySelector('.btn-danger.btn-lg.btn-block.betButton').style.backgroundColor = 'red';

示例

JSFiddle