Question

在Html文件中，我有很多这样的陈述：

<li class="menu"><a href="#">1st menu</a></li>

在javascript文件中，我有这样的代码：

1. function onload()
2. {
3.  var lists=document.getElementsByTagName("li");
4.  for(var i=0;i<lists.length;i++){
5.      if(lists[i].className=="menu"){
6.          lists[i].a.onclick=genmenu;
7.      }
8.  }
9. }

function genmenu(){
    alert("this is an alert");
    return false;
}

问题是，如果我点击“第一个菜单”链接，它就不会显示警告。但如果我改变第6行并写下：

lists[i].onclick=genmenu;

然后此链接正常工作并显示警告。

我的问题，为什么第6行（列出[i] .a.onclick = genmenu;）不起作用？这不是一个有效的代码吗？

Answer 1

您无法将嵌套元素作为另一个元素的成员进行访问：

lists[i].a

这是在寻找list[i]元素的成员，其名称为a - 它不会在其中寻找锚点。如果你想要锚，你会写：

list[i].getElementsByTagName("a")[0];

Answer 2

a不是li的属性，它是嵌套标记。你必须使用

lists[i].getElementsByTagName('a')[0];

作为旁注，请注意if(lists[i].className=="menu")，因为如果您的某个类是“menu otherClass”，它将不再有效。 jQuery有一个很好的方法来处理这个问题：hasClass（）但如果你不使用jQuery就很容易编写类似的东西。

Answer 3

在现代浏览器上，您的代码可以更简单，更高效：

function onload () {
   var links = document.querySelectorAll ('li.menu a[href]');
   for (var i= links.length; i--;) {
     links[i].addEventListener ('click', genmenu, false);
   }
}

function genmenu () {
    alert ("this is an alert");
    return false;
}

有关详细信息，请参阅the documentation on querySelectorAll。

小javascript解决方案需要：这行是一个有效的代码吗？

3 个答案: