访问没有id的DOM元素

Question

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

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

当调用测试函数时，需要隐藏调用该函数的菜单（innermenu）。

我的问题是：

1. 如何在不使用id的情况下唯一标识div。

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

- ArK

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 的最后，添加以下内容：

最后，在您的 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函数上的额外参数。

- Doug Neiner

Answer 2

有一个方法

document.getElementsByClassName

但并非所有浏览器都支持该方法。

Javascript

function test(elem)
{
    var childElem = elem.children[0];
    childElem.style.display = 'none';
}

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

如果您会使用jQuery，那么您可以像这样做。

$("div.test").click(function(){
    $(this).find("ul.innermenu").hide();
});

- rahul

---

+1 对于展示 jQuery 和纯 JS 两者的写法。同时，要注意 .children[0] 可能是文本节点而不是 Ul 元素。 - Doug Neiner

但是你的代码是最好的，因为它将JavaScript部分与HTML分开。对此给予加一。 - rahul

Answer 3

如果您不想分配ID，可以尝试隐藏被单击的div：

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

<script>
 function hideMe(elem)
 {
   elem.style.display = 'none';
 }
</script>

- Sarfraz

Answer 4

尝试将“this”作为参数传递：

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

 function test(sender) {
        //sender is DOM element that is clicked
        alert(sender.id);
    }

- Shoaib Shaikh

Answer 5

如果像@rahul所提到的那样，getElementsByClassName不被所有浏览器支持，你可以通过迭代dom并自己查找 - 前提是只有一个类名为"innermenu"的<ul>。

var uls = document.body.getElementsByTagName("ul");
var len = uls.length;
for(var i = 0; i < len; i++)
{
  var ul = uls.item(i);
  if(ul.getAttribute("class") == "innermenu")
  {
    ul.style.display = "none";
    break;
  }
}

- Amarghosh