click()命令不适用于document.getElementsByClassName() [英] click() command not working on document.getElementsByClassName()

问题描述

我正在使用javascript制作自动浏览器脚本，我想在此网站上使用click()命令，但是该网站上的按钮没有ID(效果很好).但是，它只有一个类名.当我执行document.getElementsByClassName(btn.btn-danger.btn-lg.btn-block.betButton).click()时，它不起作用.

Im making automated browser scripts with javascript and I want to use the click() command on this website but the button on the website doesnt have an Id (which works fine). However it only has a class name. When I do document.getElementsByClassName(btn.btn-danger.btn-lg.btn-block.betButton).click() it doesnt work.

这是我要单击的按钮的检查范围:

Here is the inspect of the button I want to click:

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

是否可以在按钮上使用click()函数?是否可以自己分配一个ID?感谢您的回答:)

Is it possible to use the click() function on the button? Is there someway to assign an Id myself? Thanks for any answers :)

我不认为这是一个副本，因为我知道有什么区别.但是按钮没有任何ID，只有一个类名.而且由于这种方法不起作用，我还能做些什么来触发click()事件?

I dont think that is a copy as I know what differences are. But the button doesnt have any Id only a class name. And as that doesnt work what else could I do to trigger a click() event?

Edit2 =有3个具有相同类名的按钮，唯一的区别是按钮的文本和数据颜色，是否有任何方法可以操纵它?

Edit2 = There is 3 buttons with all the same class names the only difference is the text of the button and the data-color, is there any way to manipulate that?

推荐答案

HTMLCollection ，这是一个类似数组的对象.

getElementsByClassName returns a HTMLCollection, which is an array-like object.

这意味着，在这种情况下，您应该在索引0处获得元素，理想情况下，对于正在构建的应用程序，它应该是唯一获得的元素:

That means that in you case, you should get the element at index 0, which ideally for the kind of application that you are building should be the only one that you get:

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

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

Otherwise your extension will probably stop working if the websites gets updated and the elements that matches your selector change order.

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

Note also that as @Barmar pointed out, to filter by multiple classes with getElementsByClassName you should use spaces, not dots.

假设您拥有:

<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>]

• document.getElementsByClassName('a') will return a HTMLCollection with all the elements with class a: [<button class="a"></button>, <button class="a b"></button>]
• document.getElementsByClassName('a b') will return a HTMLCollection with all the elements with classes a and b: [<button class="a b"></button>]
• document.getElementsByClassName('a.b') will return a HTMLCollection with all the elements with class a.b: [<button class="a.b"></button>]

您可以使用 querySelectorAll 可以使用.a.b之类的选择器，也可以仅使用 querySelector (而不是HTMLCollection)将仅返回与选择器匹配的第一个元素，因此您可以立即在其上调用click:

You can use querySelectorAll to be able to use selectors like .a.b or just querySelector, which instead of a HTMLCollection will return just the first element that matches the selector, so you can call click on it straight away:

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

这篇关于click()命令不适用于document.getElementsByClassName()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！