javascript - 访问没有 id 的 DOM 元素

Question

我有一个大约 500 div 的页面，如下所示。

<div onclick='test()' class='test>
     <ul class='innermenu'>
       <li>1</li>
       .....
      </ul>
  </div>

当测试函数被调用时，它需要隐藏调用该函数的菜单(innermenu)。

我的问题是

1. 不使用id唯一标识div

2. 如何仅隐藏特定的 ul。

Answer 1

好的，首先是快速修复，虽然这不是在页面上使用 JS 的最佳方式:

将调用更改为:

<div onclick="test(this);" class="test">

然后，在测试中，使用这个:

function test(el){
   var uls = el.getElementsByTagName('ul');
   for(var i = 0; i < uls.length; i++){
      if(uls[i].className == 'innermenu'){
         uls[i].style.display = "none";
         break;
      }
   }
}

这将仅隐藏被点击的 div 的子级 ul。

更好的方法

好的，为了更长的答案。要么使用 attachEvent 和 addEventListener 在事后附加事件，要么使用 jQuery 之类的库来帮助您。这是原始解决方案:

以这种方式设置您的 HTML(无 onclick):

<div class="test">

然后在你的 HTML 的最后放这个:

<script type="text/javascript">
    var divs = document.getElementsByTagName('div');
    function test(){
      var uls = this.getElementsByTagName('ul');
      for(var i = 0; i < uls.length; i++){
         if(uls[i].className == 'innermenu'){
            uls[i].style.display = "none";
            break;
         }
      }
    };

    for(var i = 0; i < divs.length; i++){
      var div = divs[i];
      if(div.className !== "test") continue;
      if(window.addEventListener){
         div.addEventListener( 'click', test, true ); //FF, Webkit, etc
      } else if (window.attachEvent) {
         div.attachEvent('onclick', test); // IE
      } else {
         div.onclick = test; // Fallback
      }
    }
</script>

现在，您的 HTML 中没有 JavaScript 代码，您可以去掉 test 函数上的额外参数。