Không hiểu hàm getElementsByClassName() trong Javascript

Chào cả nhà,

Mình có đoạn html sau:

<ul class="nav" id="topNav">
<li><a href="">Menu 1</a></li>
<li><a href="" class="dropdown">Menu 2 &nabla;</a>
  <ul class="sub-menu">
    <li><a href="">Menu 2.1</a></li>
    <li><a href="">Menu 2.2</a></li>
    <li><a href="">Menu 2.3</a></li>
  </ul>
</li>
<li><a href="">Menu 3</a></li>
<li><a href="">Menu 4</a></li>
<li><a href="" class="dropdown">Menu 5 &nabla;</a>
  <ul class="sub-menu">
    <li><a href="">Menu 5.1</a></li>
    <li><a href="" class="dropdown">Menu 5.2 &raquo;</a>
      <ul class="sub-menu">
        <li><a href="">Menu 5.2.1</a></li>
        <li><a href="">Menu 5.2.2</a></li>
        <li><a href="">Menu 5.2.3</a></li>
      </ul>
    </li>
  </ul>
</li>
<li class="icon">
  <a href="javascript:void(0);" onclick="myFunction()">
<i class="fa fa-bars"></i></a></li>
</ul>

Mình muốn lấy tất cả phần tử có class=“dropdown” để thêm thuộc tính onClick() như sau:

 <script type="text/javascript">
 function myFunction(){
var y = [];
y = document.getElementsByClassName('dropdown');
var att = document.createAttribute('onclick');
att.value = 'openChild(this)';
var i;
for (i=0; i < y.length; ++i){
  y[i].setAttributeNode(att);
  var att1 = document.createAttribute('href');
  att1.value = 'javascript:void(0)';
  y[i].setAttributeNode(att1);
}
}
</script>

Tuy nhiên, chỉ thực hiện được phần tử đầu tiên
<li><a href="" class="dropdown">Menu 2 &nabla;</a>
Còn các phần tử sau đều không thêm được thuộc tính onClick()

Ai biết chỉ mình với.

Tks!