《Javascript入門學習全集》 Javascript學習第一季（8）

Javascript學習第一季（8）

上2篇文章我們講了 用dom方式 建立節點，複制節點，插入節點, 删除節點，替換節點，查找節點，擷取屬性等。。。

今天我們講DOM屬性。

前面其實我們已經碰過DOM屬性了。

比如：

nodeName，nodeType…..今天我們詳細的講解下。

1，nodeName屬性 ： 節點的名字。

如果節點是元素節點，那麼傳回這個元素的名字。此時，相當于tagName屬性。

比如：

aaaa

 : 則傳回 p ;

如果是屬性節點，nodeName将傳回這個屬性的名字。

如果是文本節點，nodeName将傳回一個#text的字元串。

另外我要說的是： nodeName屬性是一個隻讀屬性，不能進行設定.(寫)

它傳回 大寫字母的值。

2,,nodeType屬性 ： 傳回一個整數，代表這個節點的類型。

我們常用的3中類型：

nodeType == 1 ： 元素節點

nodeType == 2 ： 屬性節點

nodeType == 3 ： 文本節點

如果想記住的話，我們可以這麼去記：

比如：

從前往後讀： 你會發現 先是元素節點 (1) ，然後是屬性節點 (2) ，最後是文本節點 (3) ，這樣你就很容易記住了 nodeType 分别代表什麼類型了。（我總結的一點小技巧， ^_^ 。）

nodeType屬性經常跟 if 配合使用，以確定不會在錯誤的節點類型上 執行錯誤的操作。

比如：

function cs_demo(mynode){

      if(mynode.nodeType == 1){

              mynode.setAttribute("title","demo");

        }

}

代碼解釋： 先檢查mynode的nodeType屬性，以確定它所代表的節點确實是 一個元素節點。

和nodeName屬性一樣，他也是隻讀屬性，不能進行設定.(寫)。

3，nodeValue屬性 ： 傳回一個字元串，這個節點的值。

如果節點是元素節點，那麼傳回null；（注意下）

如果是屬性節點，nodeValue将傳回這個屬性的值。

如果是文本節點，nodeValue将傳回這個文本節點的内容。

比如：

aaaaaaaaaaaaaaaa

nodeValue是一個可以讀、寫的屬性。 但它不能設定元素節點的值。

再看看下面的例子：

aaaaaaaaaaaaaaaa

當然我們為了確定能正确運作：可以加一段代碼：

aaaaaaaaaaaaaaaa

//可以看出，如果要設定元素節點，不能直接設定，而必須先使用firstChild或者lastChild等 然後設定nodeValue.

nodeValue一般隻用來設定 文本節點的值。如果要重新整理屬性節點的值，一般使用setAttribute().

4, childNodes屬性 ： 傳回一個數組，數組由元素節點的子節點構成。

由于文本節點和屬性節點都不可能再包含任何子節點，

是以他們的childNodes屬性永遠傳回一個空數組。

可以使用hasChildNodes方法，它用來判斷某個元素有沒有子節點。

或者 if (container.childNodes.length < 1) ；

childNodes也是一個隻讀屬性。如果要增加節點，可以使用appendChild()或者insertBefore() ，

删除節點可以使用removeChild();

操作後，childNodes屬性會自動重新整理。

5, firstChild屬性 ：

由于文本節點和屬性節點都不可能再包含任何子節點，

是以他們的firstChild屬性永遠傳回一個空數組。 如果沒有子節點，将傳回null;

 node.firstChild 等價于 node.childNodes[0] ;

firstChild屬性是一個隻讀屬性。

6 , lastChild屬性 ：  

由于文本節點和屬性節點都不可能再包含任何子節點，

是以他們的lastChild屬性永遠傳回一個空數組。 如果沒有子節點，将傳回null;

 node.lastChild 等價于 node.childNodes[ node.childNodes.length - 1 ] ;

lastChild屬性是一個隻讀屬性。

7 , nextSibling 屬性 ：

傳回目标節點的下一個兄弟節點。

如果目标節點後面沒有同屬于一個父節點的節點，nextSibling 将傳回null ；

nextSibling 屬性是一個隻讀屬性。

8 , previousSibling屬性 ：

傳回目标節點的前一個兄弟節點。

如果目标節點前面沒有同屬于一個父節點的節點，previousSibling 将傳回null ；

previousSibling 屬性是一個隻讀屬性。

9 , parentNode 屬性 ：

注：parentNode屬性傳回的節點永遠是一個元素節點，因為隻有元素節點才有可能有子節點。

當然有個例外：

document節點，他沒有父節點。是以document節點的parentNode屬性将傳回null；

parentNode 屬性是一個隻讀屬性。

好了，DOM的常用屬性和方法說到這裡，了解這些方法的使用，

相信大家的DOM程式設計技術會有很大的提高。

如果還有不懂，可以google 搜尋資料.

或者聯系我 ,可以去我的blog 給我留言 :

http://www.cssrain.cn/LoadMod.asp?plugins=GuestBookForPJBlog

轉載于:https://www.cnblogs.com/JemBai/archive/2008/08/13/1266788.html