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中怎么獲取子節點，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。