以编程方式单击div根目录以打开使用Java脚本在内部打开的内容

Question

我试图以编程方式单击下面的div类（_2wP_Y），以打开部分屏幕，该屏幕内部使用javascript显示某些内容。

<div class="_2wP_Y" style="z-index: 3; height: 72px; transform: translateY(72px);">
<div tabindex="-1">
    <div class="_2EXPL CxUIE _1f1zm">
      ....
      ....
    </div>
</div>
</div>

我尝试了多种方法来单击HTMLDivElement对象。单击控制台控制台网站上的日志，但不会在屏幕上自动单击。

我尝试过的代码

     var HTMLDivElement =   document.getElementsByClassName('_2wP_Y')
     HTMLDivElement.onclick = function() {
            console.log("Clicked " );

        }

    var clickEvent = new MouseEvent("click", {
        "view": window,
        "bubbles": true,
        "cancelable": false
    });

       HTMLDivElement.dispatchEvent(clickEvent);

它打印单击控制台上的。 我也尝试过HTMLDivElement.click(); 它还会打印“在控制台上单击”，但在浏览器上不会发生单击。

有多个div具有相同的类名（_2wP_Y），我正在使用Chrome在Ubuntu中进行测试。

基本上，我试图单击下图左侧的div，以打开该部分中间的网上论坛邮件内容。

Answer 1

问题可能是dom尚未加载，导致onclick事件未真正附加到DOM元素。另一个问题可能是getElementsByClassName返回一个数组而不是单个元素（像getElementById这样）。因此，如果只有一个与该特定类有关的对象，则可以使用HTMLDivElement[0]

尝试将所有内容包装在window.onload = function() {};中：

window.onload = function() {
    var HTMLDivElement = document.getElementsByClassName('_2wP_Y');
    HTMLDivElement[0].onclick = function() {
        console.log("Clicked");
    }
}

Answer 2

我希望这会成功，编码愉快:)

var HTMLDivElement =   document.getElementsByClassName('_2wP_Y')

    HTMLDivElement[0].addEventListener("onclick", function(){
        console.log("clicked")
        HTMLDivElement[0].style.backgroundColor = "red";

    })

    HTMLDivElement[0].dispatchEvent(new Event("onclick"));

<div class="_2wP_Y" style="z-index: 3; height: 72px; transform: translateY(72px);">
<div tabindex="-1">
    <div class="_2EXPL CxUIE _1f1zm">
      ....
      ....
    </div>
</div>

Answer 3

使用jQuery。

//handling click event
$("._2wP_Y").click(function() {
  alert("I was clicked");
})


//click itself
$("._2wP_Y").click();

<div class="_2wP_Y">i was clicked</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>