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

Javascript學習第一季（7）

上篇文章我們講了 用dom方式 建立節點，複制節點，插入節點。

今天我們将講 删除節點，替換節點，查找節點等。

直接從方法說起：

<!--[if !supportLists]-->1， <!--[endif]-->删除節點。removeChild():

a

b

c

如果不知道要删除的節點的父節點是什麼？可以使用parentNode屬性。

比如：

<!--[if !supportLists]-->2， <!--[endif]-->替換節點。repalceChild()

element.repalceChild( newNode , oldNode ); // 新節點是客人，肯定先服務他咯。。oldNode必須是Element的一個子節點。

例子：

3，查找節點

相對上面的方法，查找節點是比較簡單的。

因為很多人都用過。(記得我認識js的第一句就是getElementById();)

getElementById();

傳回一個對象， 對象擁有 nodeName , nodeType , parentNode , ChildNodes 等屬性。

getElementsByTagName() 查找标簽名的所有元素。

傳回一個集合，可以用循環取出每個對象，對象擁有 nodeName , nodeType , parentNode , ChildNodes 等屬性。

 var ps = document.getElementsByTagName(“p”);

for(var i=0 ; i< ps.length ; i++){

           ps[i].setAttribute(“title”,”hello”);

//也可以使用: ps.item(i).setAttribute("title","hello");

}

<!--[if !supportLists]-->4， <!--[endif]-->設定/擷取屬性節點。

setAttribute();//設定

var a = document.createElement(“p”);

a.setAttribute(“title”,”my demo”);

不管以前有沒有title屬性，以後的值 是 my demo。

getAttribute();//擷取

var a =document.getElementById(“cssrain”);

var b = a.getAttribute(“title”);

擷取的時候，如果屬性不存在，則傳回空，注意ie和ff傳回不同。

aaaa

bbbb

傳回雖然不同，但是可以用一個方法來判斷。

if(a.getAttribute(“title”) ){ 

// do something

 }

5,hasChildNodes:

由名字就可以知道，是判斷元素是否有子節點。

傳回boolean類型。

文本節點和屬性節點不可能有子節點，是以他們的hasChildNodes 永遠傳回false；

hasChildNodes經常跟 childNodes 一起使用。

大家自己動動手寫寫，不然光看記憶性不好。

好了，講到這裡，明天繼續講。

今天講了 用dom方式删除節點，替換節點，查找節點, 擷取屬性等。。。

操作DOM的方法也差不多了。

明天我們講DOM 屬性…..