JavaScript中的getElementsByClassName（）錯誤

Question

我有html代碼：

<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>

我想獲得所有帶有class =“ dropdown”的元素，以添加onclick（）屬性，如下所示：

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

}
</script>

但是，只能執行第一個元素：

<li><a href="" class="dropdown">Menu 2 &nabla;</a>

以下元素不添加onclick（）。

Answer 1

不要分配要從HTML解析為JS的屬性字符串-這與eval一樣糟糕。 而是使用Javascript正確分配處理程序。

您可以使用querySelectorAll和forEach直接（通過NodeList ）進行迭代，而無需for循環或一遍又一遍地選擇集合。

您還需要preventDefault的event ，以防止網頁被替換，因為有問題的元件是a S：

 function openChild(e) { e.preventDefault(); console.log('opening ' + e.target.textContent); } document.querySelectorAll('.dropdown') .forEach(dropdown => dropdown.addEventListener('click', openChild)); 

 <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> 

請注意， NodeList.forEach有點新-如果您不使用polyfills，那么如果您想支持舊版瀏覽器， call改為call Array方法：

Array.prototype.forEach.call(
  document.querySelectorAll('.dropdown'),
  dropdown => dropdown.addEventListener('click', openChild)
);