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

最新推荐文章于 2021-11-03 22:37:06 发布

我逍遥

最新推荐文章于 2021-11-03 22:37:06 发布

阅读量4.5k

点赞数 1

分类专栏： HTML+CSS+JS javaEE学习进阶文章标签： this js childNodes nodeName

本文链接：https://blog.csdn.net/jack0201/article/details/77835762

版权

HTML+CSS+JS 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

javaEE学习进阶

6 篇文章 0 订阅

订阅专栏

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

可以使用以下方法，让每一个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>

我逍遥

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript获取标签子节点并进行相应设置

由于经常会遇到对同一个类型的标签的子标签进行相应的处理，例如下图所示情况。可以使用以下方法，让每一个li标签添加onclick事件，并且将这个标签整体传递给onclick事件的函数。//获取子节点数组 var aChild =Obj.childNodes; for(var i = 0,len = aChild.length; i < len; i++ ){ //判断子节点名
复制链接

扫一扫

专栏目录