Clicking children of class in pure javascript

Question

Below is sample html , where i am trying to click close button , there are many close buttons, but i want to click close button that is inside class mytop

<div class="mytop">
<a class="mychild" role="button" href="#">Close</a>
</div>

I am trying to get javascript equivalent code for below jquery

$(".mytop").children(".mychild").click();

Answer 1

var topEl = document.querySelector('.mytop');
var closeBtn = topEl.querySelector('a.mychild');
closeBtn.click();

Answer 2

grap class by getElementsByClassName and use addEventListener for event function..

Use window.onload because you can only grap childnode after your document is loaded

window.onload = function(){
var top = document.getElementsByClassName("mytop");
  top[0].children[0].onclick = function(){
        alert(this.className); //mychild
  };  
}

Answer 3

Use document.querySelector(<selector string>)

For your use case, the code would look something like the following:

var closeButton = document.querySelector('.mytop a.mychild');
closeButton.click();

Am am assuming you wanted to simulate a click - not listen for one and fire a function.

Answer 4

var child = document.getElementsByClassName("mytop").childNodes;
 child[0].onclick = function(){
    alert("dsf");
 };

Right i am selecting the first child element only in the above code.