Question

我之前尝试过这个问题，但我想我还不够具体。假设我有一个看起来像这样的HTML代码。如何使用纯JavaScript仅定位horizontalNAV中的标记？好吧，我知道我可以使用像这样的jQuery来做到这一点......

<script type="text/javascript">
   $(document).ready(function(){
      $('#horizontalNAV li a').click(function(){
         //jQuery code here...
      });
   });
</script>

但是我不想要jQuery的答案，因为我想知道如何使用纯javaScript定位（＆＃39; #horizontalNAV li a＆＃39;）。

或者您可以告诉我如何为verticalNav部分执行此操作，无论是我获得它，如果我看到一个示例或者它向我解释。如果我没弄错，你将不得不使用document.querySelectorAll方法，如果是这样，那么在上面的例子中它是如何工作的。

<div id="wrapper">
   <div id="horizontalNav">
      <ul>
       <li><a href="#"></a>item1</li>
       <li><a href="#"></a>item2</li>
       <li><a href="#"></a>item3</li>
      </ul>
   </div>
   <div class="sideBar">
      <div class="verticalNav">
         <ul>
           <li><a href="#"></a>item1</li>
           <li><a href="#"></a>item2</li>
           <li><a href="#"></a>item3</li>
         </ul>
      </div>
   </div>
</div>

Answer 1

没有jQuery，它看起来像这样

<script type="text/javascript">
   document.addEventListener("DOMContentLoaded", function(event) {

      var elems = document.querySelectorAll('#horizontalNav li a');

      for (var i = elems.length; i--;)
           elems[i].addEventListener("click", handler, false);

   }, false);

   function handler(event) {
       //javascript code here...

       this.style.color = 'red';
   }
</script>

FIDDLE

Answer 2

如果 #horizontalNAV 是UL或OL元素，那么它只能有LI元素子元素，因此您可以跳过选择器的那一部分。以下内容并未使用 querySelectorAll ，因此可以在不支持它的浏览器中使用：

<script>

  window.onload = function() {
    var list = document.getElementById('#horizontalNAV');
    var links = list && list.getElementsByTagName(‘a’);

    if (links) {
      for (var i=0, iLen=links.length; i<iLen; i++) {
        links[i].onclick = listener;
      }
    }
  }

  function listener() {
     // do stuff
  }

</script>

如果要为事件包含多个侦听器，则需要使用 addEventListener 或其他策略，而不是直接将该函数分配给该元素，但在大多数情况下只需要一个每个事件类型都需要监听器，并且保持简单有其好处。

侦听器函数在执行赋值的函数外部声明，以避免闭包和循环引用，因此它应该减少创建内存泄漏的可能性。

针对JavaScript中的特定元素？

2 个答案: