Как автоматизировать «onclick», если нет идентификатора элемента для этой строки?

Question

В Javascript я пытаюсь автоматизировать «onclick()», но проблема в том, что я не знаю, как направить мой «onclick()» на этот элемент интереса.

Когда элемент ДЕЙСТВИТЕЛЬНО есть идентификатор, хотя, я делаю это:

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

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

Но на этот раз, после того, глядя на HTML страницы, мой «OnClick» интереса не имеет идентификатора, так Я не знаю, как сообщить браузеру щелкнуть его. Однако в линии прямо перед ним, есть 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

Вы можете использовать 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, он возвращает узел, поэтому вы можете просто использовать его напрямую.

В этом конкретном случае querySelectorAll вернет только один элемент, но я думаю, что вы поняли эту идею.

Или, если вы действительно хотите просто первый ребенок, а затем использовать firstChild:

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

Answer 2

В JQuery, вы можете сделать что-то вроде этого, чтобы вызвать щелчок на первого ребенка:

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