访问没有id的DOM元素

Question

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

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

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

我的问题是

1. 唯一标识div而不使用id

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函数上的额外参数。

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();
});

Answer 3

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

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

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

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);
    }

Answer 5

如果@rahul提到的所有浏览器都不支持getElementsByClassName ，你可以遍历dom并自己找到它 - 前提是只有一个<ul> ，类名为"innermenu"

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