js 获取指定节点下某种子节点数量

最新推荐文章于 2021-12-06 17:46:05 发布

原创最新推荐文章于 2021-12-06 17:46:05 发布 · 3.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#class #function

javascript 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个简单的HTML和JavaScript实现的选项卡切换效果。通过定义不同类别的`<div>`和`<li>`元素来展示不同的内容部分，并使用JavaScript函数`getChildren`来获取指定元素下的指定子节点。

html

<div id='tab'>
<ul>
 <li class="option seletedLi">第一部分</li>
 <li class="option">第二部分</li>
 <li class="option">第三部分</li>
 <li class="option">第四部分</li>
 <li class="option">第五部分</li>
</ul>
<div class="content seletedDiv">第一部分</div>
<div class="content"><ul><li>111</li><li>111</li></ul>第二部分</div>
<div class="content">第三部分</div>
<div class="content">第四部分</div>
<div class="content">第五部分</div>
</div>

//获取指定元素下指定子节点函数
function getChildren(ele,tag){
	var oDivs = document.getElementById(ele);
	var children = oDivs.childNodes;//先把ele所有子节点获取到；
	tag = tag.toUpperCase();
	var a = [];
	
	for(var i=0;i<children.length;i++){//做循环
		var node = children[i];
		if(node.nodeType==1&&node.nodeName==tag){
			//如果当前子元素的‘节点类型’是1，并且节点名称是tag值；
			a.push(children[i]);//把子节点放到数组中；
			}
		}
	return a;
	}	
var len = getChildren('tab','ul');
alert(len.length)