Javascript中怎么獲取子節(jié)點(diǎn)

本篇文章給大家分享的是有關(guān)Javascript中怎么獲取子節(jié)點(diǎn)，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

　　Javascript怎樣獲取子節(jié)點(diǎn)

　　在Javascript中，可以通過children 來獲取所有子節(jié)點(diǎn)。

　　children只返回HTML節(jié)點(diǎn)，甚至不返回文本節(jié)點(diǎn)，雖然不是標(biāo)準(zhǔn)的DOM屬性，但是得到了幾乎所有瀏覽器的支持。

　　語(yǔ)法：

　　nodeObject.children

　　其中，nodeObject 為節(jié)點(diǎn)對(duì)象(元素節(jié)點(diǎn))，返回值為所有子節(jié)點(diǎn)的集合(數(shù)組)。

　　注意：在IE中，children包含注釋節(jié)點(diǎn)。

　　例如，獲取 id="demo" 的節(jié)點(diǎn)的所有子節(jié)點(diǎn)：

　　?

　　1

　　document.getElementById("demo").children;

　　一般情況下，我們是希望獲取元素節(jié)點(diǎn)，可以通過 nodeType 屬性來進(jìn)行刷選，nodeType==1 的節(jié)點(diǎn)為元素節(jié)點(diǎn)。

　　下面，自定義一個(gè)函數(shù)來獲取所有的元素子節(jié)點(diǎn)：

　　Javascript怎樣獲取子節(jié)點(diǎn)

　　var getChildNodes=function(ele){

　　var childArr=ele.children,

　　childArrTem=new Array(); // 臨時(shí)數(shù)組，用來存儲(chǔ)符合條件的節(jié)點(diǎn)

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

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

　　childArrTem.push(childArr[i]); // push() 方法將節(jié)點(diǎn)添加到數(shù)組尾部

　　}

　　}

　　returnchildArrTem;

　　}

　　舉例，獲取 id="demo" 的節(jié)點(diǎn)的所有元素子節(jié)點(diǎn)：

　　div id="demo">

　　!-- 這里是注釋 -->

　　div>子節(jié)點(diǎn)一/div>

　　div>子節(jié)點(diǎn)二/div>

　　div>子節(jié)點(diǎn)三/div>

　　/div>

　　script type="text/javascript">

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

　　var childArr=getChildNodes(this);

　　alert("元素子節(jié)點(diǎn)的個(gè)數(shù)為："+childArr.length);

　　}

　　/script>

　　請(qǐng)看下面的演示(點(diǎn)擊即可)：

　　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中怎么獲取子節(jié)點(diǎn)，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。