JavaScript如何通过类名点击元素

Question

我正在编写一个可以在页面上运行的脚本，但是我想要点击这个元素，不幸的是它没有 id 可供获取，我尝试使用 .click() 函数进行点击，但它不起作用，以下是我的代码，有谁知道如何解决吗？此类中只有这一个元素。

var classes = document.getElementsByClassName('rateRecipe btns-one-small');
var Rate = classes[0];
Rate.click();

- Cup of Java

---

"这是类中唯一的元素" - 好的，是哪个类中唯一的元素？你在选择器中列出了两个类？ - David Thomas

在 rateRecipe 类和 btns-one-small 中。 - Cup of Java

当你有关于DOM选择的问题时，你需要发布你正在选择的DOM，这样我们才能看到问题出在哪里。否则我们只是在猜测。 - cookie monster

你可以尝试使用以下代码：document.getElementsByClassName('rateRecipe btns-one-small')[0].click(); 我通常都是这样做的，它很有效。 - Ajit Hogade

Answer 1

我建议：

document.querySelector('.rateRecipe.btns-one-small').click();

上面的代码假设给定的元素具有这两个类的 同时存在；否则，如果空格的意思是指祖先-后代关系：

document.querySelector('.rateRecipe .btns-one-small').click();

方法getElementsByClassName()接受一个类名作为参数（而不是像document.querySelector()/document.querySelectorAll()那样接受CSS选择器），但您向该方法传递了两个参数（可能是类名）。

参考资料：

• document.getElementsByClassName()。
• document.querySelector()。

- David Thomas

---

只是提供信息，getElementsByClassName可以接受多个类，所以如果@user3010773试图选择具有两个类的单个元素，则他的原始代码将完美地工作。http://jsfiddle.net/u94wtpcn/ - cookie monster

Answer 2

如果你想点击所有被某个类选中的元素，你可以使用这个例子（在last.fm上用于喜欢的曲目页面上取消所有喜欢）。

var divs = document.querySelectorAll('.love-button.love-button--loved'); 

for (i = 0; i < divs.length; ++i) {
  divs[i].click();
};

使用ES6和Babel（不能直接在浏览器控制台中运行）

[...document.querySelectorAll('.love-button.love-button--loved')]
   .forEach(div => { div.click(); })

- Oleg Abrazhaev

---

循环可能比 [...document.querySelectorAll('.love-button.love-button--loved')].forEach(div => { div.click(); }) 更可取，你觉得呢？ - A S

@AS 我认为所提出的代码性能较差，但当然使用ES6更加美观。我会将其添加到答案中，谢谢。 - Oleg Abrazhaev

Answer 3

如果您知道按钮的索引，可以按照以下方式获取所需内容：

var rate = document.getElementsByClassName('rateRecipe btns-one-small')[0];
rate.click();

或用于直接操作

document.getElementsByClassName('rateRecipe btns-one-small')[0].click();

使用jQuery

$('.rateRecipe .btns-one-small').click(function(){
    var vIndex = $('.rateRecipe .btns-one-small').index(this);
    //vIndex is the index of buttons out of multiple
    
    //do whatever 
    //alert($(this).val());//for value
});

- sifr_dot_in

Answer 4

下面的代码对我有帮助

document.querySelector('.input-addon.btn.btn-default.fileinput-exists').click();

但我想点击第二个按钮，我的屏幕上有两个按钮，所以我使用了querySelectorAll

var elem = document.querySelectorAll('.input-addon.btn.btn-default.fileinput-exists');
                elem[1].click();

这里的elem[1]是我想要点击的第二个按钮对象。

- asifaftab87