您的位置：首页 > Web前端 > JavaScript

javascript获取标签子节点并进行相应设置

2017-09-04 11:32 507 查看

由于经常会遇到对同一个类型的标签的子标签进行相应的处理，例如下图所示情况。

可以使用以下方法，让每一个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 onclick="showTree(this)">menu1
<ul id="ul1" style="display:none" >
<li>item1</li>
<li>item2</li>
</ul>
</li>
<li onclick="showTree(this)">menu2
<ul id="ul2" style="display:none" >
<li>item1</li>
<li>item2</li>
</ul>
</li>
<li onclick="showTree(this)">menu3
<ul id="ul3" style="display:none" >
<li>item1</li>
<li>item2</li>
</ul>
</li>
</ul>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航