由于经常会遇到对同一个类型的标签的子标签进行相应的处理,例如下图所示情况。
可以使用以下方法,让每一个li标签添加onclick事件,并且将这个标签整体传递给onclick事件的函数。
//获取子节点数组 var aChild =Obj.childNodes; for(var i = 0,len = aChild.length; i < len; i++ ){ //判断子节点名称,注意大写。 if(aChild[i].nodeName == 'UL'){ //获取子节点id var ul = document.getElementById(aChild[i].id); }
上面菜单的实现办法如下:<html> <head> <script> function showTree(Obj){ //获取子节点数组 var aChild =Obj.childNodes; for(var i = 0,len = aChild.length; i < len; i++ ){ //判断子节点名称,注意大写。 if(aChild[i].nodeName == 'UL'){ //获取子节点id var ul = document.getElementById(aChild[i].id); if(ul.style.display=="none"){ ul.style.display="block"; } else { ul.style.display="none"; } } } } </script> </head> <body> <ul> <li οnclick="showTree(this)">menu1 <ul id="ul1" style="display:none" > <li>item1</li> <li>item2</li> </ul> </li> <li οnclick="showTree(this)">menu2 <ul id="ul2" style="display:none" > <li>item1</li> <li>item2</li> </ul> </li> <li οnclick="showTree(this)">menu3 <ul id="ul3" style="display:none" > <li>item1</li> <li>item2</li> </ul> </li> </ul> </body> </html>
javascript获取标签子节点并进行相应设置
最新推荐文章于 2022-07-16 22:55:29 发布