Javascript中怎么获取子节点

本篇文章给大家分享的是有关Javascript中怎么获取子节点，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

　　Javascript怎样获取子节点

　　在Javascript中，可以通过children 来获取所有子节点。

　　children只返回HTML节点，甚至不返回文本节点，虽然不是标准的DOM属性，但是得到了几乎所有浏览器的支持。

　　语法：

　　nodeObject.children

　　其中，nodeObject 为节点对象(元素节点)，返回值为所有子节点的集合(数组)。

　　注意：在IE中，children包含注释节点。

　　例如，获取 id="demo" 的节点的所有子节点：

　　?

　　1

　　document.getElementById("demo").children;

　　一般情况下，我们是希望获取元素节点，可以通过 nodeType 属性来进行刷选，nodeType==1 的节点为元素节点。

　　下面，自定义一个函数来获取所有的元素子节点：

　　Javascript怎样获取子节点

　　var getChildNodes=function(ele){

　　var childArr=ele.children,

　　childArrTem=new Array(); // 临时数组，用来存储符合条件的节点

　　for(var i=0,len=childArr.length;ilen;i++){

　　if(childArr[i].nodeType==1){

　　childArrTem.push(childArr[i]); // push() 方法将节点添加到数组尾部

　　}

　　}

　　returnchildArrTem;

　　}

　　举例，获取 id="demo" 的节点的所有元素子节点：

　　div id="demo">

　　!-- 这里是注释 -->

　　div>子节点一/div>

　　div>子节点二/div>

　　div>子节点三/div>

　　/div>

　　script type="text/javascript">

　　document.getElementById("demo").onclick=function(){

　　var childArr=getChildNodes(this);

　　alert("元素子节点的个数为："+childArr.length);

　　}

　　/script>

　　请看下面的演示(点击即可)：

　　style type="text/css" data-filtered="filtered">#demo567{

　　height:180px;

　　width:250px;

　　padding:0px 10px 10px 10px;

　　border:1px solid #ccc;

　　background-color:#ededed;

　　}

　　#demo567 div{

　　height:50px;

　　width:250px;

　　margin-top:10px;

　　text-align:center;

　　line-height:50px;

　　background-color:#ccc;

　　}/style>

以上就是Javascript中怎么获取子节点，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。