ChildNodes詳解及其相容性處理方式

寫在前面：在做insertbefore插入節點練習時發現乙個問題，插入childnodes[0]和childnodes[1]時插入的位置是一樣的！於是有了childnodes的了解，有了這篇文章，歡迎交流，歡迎拍磚。

本文包括如下:

1、dom 常用節點型別說明

2、childnodes.length詳解

3、節點中取值問題

4、childnodes相容性處理

說明：本文綜合網上其它博文對於childnodes的詳解。

nodetype

nodename

1element_node

元素節點

2attribute_node

屬性節點

3text_node

文字節點

4comment_node

注釋節點

5document_node

文件節點

對於元素節點、屬性節點、文字節點的理解請戳這裡

我們都知道js操作document時，使用childnodes取得節點的子節點個數時，在ie6、7、8下時完全沒有問題的，但是在其它瀏覽器下使用childnodes獲取節點，它會將空格符、回車符、換行符也看做乙個文字節點，使得節點長度不是我們想要的，我們看一下如下示例：

**部分：

<
div 
id="div1"
>
<
p id
="fg"
>1
p>
<
p>2
p>
div>
jsvar c=document.getelementbyid("div1");
alert(c.childnodes.length);
alert(c.childnodes[0].nodename);
alert(c.childnodes[1].nodename);
alert(c.childnodes[2].nodename);
alert(c.childnodes[3].nodename);
alert(c.childnodes[4].nodename);
alert(c.childnodes[5].nodename);

獲取到的childnodes長度及其nodename如下圖所示，通過下圖我們可以了解到換行符被看成文字節點，如果是在ie6,7,8中則為（2、p、p）;

如果我們把html**改成如下，則結果為：

所以就如我們前面所說在瀏覽器中childnodes連乙個回車符都不放過！

<
div 
id="div1"
>
<
p id
="fg"
>1
p>
<
p>2
p>
div>

我們把上個小節中**nodename換成nodevalue，看一下結果如圖

不科學啊！為什麼的nodevalue值會為空！

原因在於，元素節點，擁有乙個值為 "1" 的文字節點。1並不是元素節點p的值

那麼我們若想取到中的數字1怎麼辦，我們需要獲得的是的childnodes的nodevalue值

var divnodes=document.getelementbyid("div1").getelementsbytagname("p");
alert(divnodes[0].childnodes[0].nodevalue);
或者var pp=document.getelementbyid("fg");
alert(fg.childnodes[0].nodevalue);

我們可以通過判斷div子節點的個數是否等於子節點元素節點的個數，若等於，繼續操作，若不等於，可通過新建乙個陣列，找出div子節點的元素節點填入陣列，然後對陣列進行操作，我們以insertbefore（）插入節點為例，**如下：

>插入節點

button

script

function

test()

}c.insertbefore(a,rows[

0]);

}else

}script

body

html

這樣插入時childnodes[0]和childnodes[1]插入的位置就不一樣啦。

ChildNodes詳解及其相容性處理方式

js 陣列去重方法兼思想詳解

select詳解及其限制

NAT型別及其檢測詳解

ChildNodes詳解及其相容性處理方式

js 陣列去重方法兼思想詳解

select詳解及其限制

NAT型別 及其 檢測 詳解

相關推薦

NAT型別及其檢測詳解