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

[Davitluit (Davit lượt)]

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!

[completejavascript (Lam Pham)]

att của bạn muốn sử dụng cho các Node khác nhau thì cần phải được clone. Cụ thể là bạn sửa:

y[i].setAttributeNode(att);

Thành:

y[i].setAttributeNode(att.cloneNode(true));

Thử lại xem, chắc là OK rồi đó.

[Davitluit (Davit lượt)]

Ngon luôn @completejavascript ơi

Mình chỉ là tay mới về javascript, định làm cái collapse menu nên mới động đến cái này. Có thể giải thích giúp mình vì sao phải có động tác clone không?

Cám ơn @completejavascript rất nhiều.

[completejavascript (Lam Pham)]

Theo mình hiểu thì cái thằng attr (hay thậm chí các thằng DOM khác) là Node trong một cấu trúc cây. Nên nó chỉ dùng được ở một chỗ thôi.

Tương tự như khi bạn dùng createElement, rồi appendChild vào document thì bạn cũng cần phải clone nó nếu muốn dùng ở nhiều chỗ.

p/s: Giải thích có vẻ hơi lôm côm quá thì phải.