Question

在Javascript中，我正在尝试自动化“onclick（）”，但问题是我不知道如何将“onclick（）”指向感兴趣的元素。

当元素DOES有ID时，我这样做：

var redbutton = "document.getElementById("red_button")"

if (redbutton) {
    redbutton.onclick();
    }

但这一次，在查看页面的HTML后，我感兴趣的“onclick”没有ID，所以我不知道如何告诉我的浏览器点击它。但是，在它之前的行中，有一个ID：

<div id="buttoncolor_pane" style="background-color: rgb(50, 50, 50); position: absolute; width: 400px; height: 200px; top: 30px; left: 0px; z-index: 998; padding-top: 25px; background-position: initial initial; background-repeat: initial initial;">
    <div style="width:140px; margin:10px auto; cursor:pointer" onclick="buttoncolor_submit('blue')">
    <div style="width:140px; margin:10px auto; cursor:pointer" onclick="buttoncolor_submit('yellow')">

有没有办法可以将我的代码指向该行，然后告诉它执行“onclick”？

Answer 1

在jQuery中，您可以执行以下操作来触发对第一个孩子的点击：

$('#buttoncolor_pane').children().first().click()

Answer 2

您可以使用querySelector或querySelectorAll :(可在节点上调用或document）

// get all div elements that are direct children of #buttoncolor_pane
var nodes = document.querySelectorAll('#buttoncolor_pane > div');
if (nodes === null) {
    return; // or do some other error handling
}

for (var i = 0; i < nodes.length; i++) {
    nodes[i].onclick();
}

您可以使用任何您喜欢的查询选择器作为参数。如果您只想要一个，请改用querySelector。它是一样的，但它不是返回一个NodeList，而是返回一个Node，所以你可以直接使用它。

在这种特殊情况下，querySelectorAll只返回一个元素，但我认为你明白了。

或者，如果您真的只想要第一个孩子，请使用firstChild：

document.getElementById('buttoncolor_pane').firstChild.onclick();

如果该行没有元素ID，如何自动化“onclick”？

2 个答案: