DOM可以做什麼（三）

DOM節點資訊
每個DOM節點都儲存了關於該節點的一些資訊，我們來看看如何訪問這些資訊。
nodeName、nodeValue和nodeType
同樣，按照字面意思：nodeName表示節點名稱，nodeValue表示節點值，nodeType則為節點類型。每個DOM節點都包含這些資訊，我們可以很方便地通過JavaScript來訪問這些屬性。下面我們就來看一個使用這些屬性的一個例子。
應用執行個體
HTML代碼：
<div>
  <p id="test">test文字</p>
</div>

JavaScript代碼
<script type="text/javascript">
function getName(){
        var x =document.getElementById("test");
        alert(x.nodeName);
}
function getValue(){
        var x =document.getElementById("test");
        alert(x.nodeValue);
}
function getType(){
        var x =document.getElementById("test");
        alert(x.nodeType);
}
</script>

實際效果：
test文字

getName()
getValue()
getType()

從例子中可以發現：一個p標籤的nodeName是P，儘管在XHMTL中我們把段落寫作小些的p，該屬性仍然為大寫字母。它的nodeValue是null，而並不是它所包含的文本，這是因為文本本身也是一個節點，而文本節點的nodeValue才是文字。
最後，nodeType是“1”。它的意思是元素節點（我們知道，p是一個HTML元素）。其它重要的DOM節點類型：
2 —— 屬性節點
3 —— 文本節點
8 —— 注釋節點
======================================================================================================

DOM資訊nodeType的應用
本文介紹了使用DOM節點的nodeType屬性來過濾出特定類型節點的方法。並且舉了一個統計文檔內所有元素節點的執行個體。
使用DOM時一個很奇怪（也很惱人）的情況就是連代碼中的換行都可能會被視為節點。以下面的HTML代碼為例。
HTML代碼
代碼如下，我們可以清楚地看到div節點內只有一個段落。
<div id="test">
        <p>我是測試段落</p>
</div>
<div id="result">&nbsp;</div>
JavaScript代碼
之後我們使用下面的JavaScript代碼來顯示id為test的div的子節點。首先，我們使用getElementById獲得id為test的節點。之後使用childNodes獲得它的子結點。最後在id為result的節點中顯示這些子結點的節點名稱和節點類型。
<script type="text/javascript">
function test(){
        var str = "";
        var nodes =document.getElementById("test").childNodes;
        for( var i = 0;i <nodes.length; i++){
               str += nodes[i].nodeName;
               str += ":";
               str += nodes[i].nodeType;
               str += "<br/>";
        }
        document.getElementById("result").innerHTML= str;
}
</script>
nodeType的應用
點擊下面的按鈕就可以看到您所使用的瀏覽器認為這個div有幾個子結點。
test()
我是測試段落
 
在FireFox下，得到如下的結果：
#text:3
P:1
#text:3
在IE下，得到如下結果：
P:1
可見，在FireFox中，代碼中的換行也被認為是一個類型為1，名字為#text的節點。但是通常我們對代碼中的換行並不感興趣。這時我們就可以使用nodeType來過濾掉這類不需要的元素。使用下面的JS代碼就可以實現了。
for( var i = 0;i < nodes.length; i++){
        if(nodes[i].nodeType == 1){
        //代碼，只有在節點為元素節點的時候才執行
        }
}
遍曆文檔所有的元素節點www.2cto.com
下面我們在來看一段使用nodeType的JS代碼。它的功能是遍曆文檔中所有的元素節點，並且統計元素節點的總數。當然我們以可以修改代碼來對這些元素節點做任何操作。JavaScript代碼如下：
<script type="text/javascript">
function countElements(node){
        var total = 0;
        if(node.nodeType == 1){ total +=1;}
        var children = node.childNodes;
        for(var i = 0;i <children.length; i++){
               total +=countElements(children[i]);
        }
        return total;
}
function test2(){
        var elementsCount =countElements(document);
        alert(elementsCount);
}
</script>
test2()
點擊上面的按鈕就可以看到這個網頁的總元素節點數了

======================================================================================================
修改DOM——innerHTML
本節介紹使用innerHTML來訪問以及修改HTML DOM的方法。
我們之前已經瞭解到一些查詢DOM節點的函數，例如getElementById和getElementsByTagName。但是我們不僅可以訪問DOM節點，更可以改變它們，甚至改變整個節點樹的結構。下面我們就來看看改變DOM的最簡單的方法——innerHTML。
innerHTML的意思就是“裡面的HTML”，就像它的名字一樣容易理解，使用它也是異常的簡單。我們先來看一個例子。
訪問innerHTML執行個體代碼
<div id="test">
        <p>我是測試段落。</p>
</div>
效果如下：
我是測試段落。
test() ,點擊這個按鈕就可以顯示出div的innerHTML，它調用的JS代碼如下：
<script type="text/javascript">
function test(){
        alert(document.getElementById("test").innerHTML);
}
</script>
修改innerHTML執行個體代碼
給元素的innerHTML賦值就可以改變元素的內容了，同樣是上面的div，我們建立另外一段代碼來改變它的內容：
<script type="text/javascript">
function testW(){
        var str = "<p>面目全非！￥%……&*（）</p>";
        document.getElementById("test").innerHTML= str;
}
</script>
testW() ，點擊這個按鈕就可以執行上面的代碼，將第一個例子中div的內容改變。
 
刪除DOM節點——removeChild
本節介紹了如何使用removeChild從文檔中刪除DOM節點，舉出一個簡單例子的同時還簡單介紹了該函數的傳回值。
上一節我們看了如何使用innerHTML來修改DOM，而使用removeChild函數則可以刪除文檔中的指定節點。我們仍然使用一個例子來說明該函數的使用方法。
HTML代碼
<div id="test">
        <p>我是將要被刪除的節點</p>
</div>
執行個體JavaScript代碼
<script type="text/javascript">
function remove(){
        var test =document.getElementById("test");
        var children = test.childNodes;
        for(i=0;i<children.length;i++){
               test.removeChild(children[i]);
        }
}
</script>
刪除節點樣本
我是將要被刪除的節點
remove() ，點擊這個按鈕就會將上面div的子結點全部刪除。
從上面的JS代碼可以看到，使用removeChild的格式為：
父節點.removeChild(子結點)
removeChild的傳回值
removeChild刪除節點後會返回被刪除節點的引用，這樣當我們以後再想重新將它添加到文檔中，或者是對它進行其它操作的時候就可以使用這個引用了。例如下面的程式碼片段：
var removed = xxx.removeChild(xxxx);
則removed就是被刪除的節點，可以在後面的代碼中使用。
添加DOM節點
本節介紹使用標準的DOM方法向文檔中添加節點，用到了createElement、createTextNode以及appendChild等方法。
前面我們通過innerHTML來改變文檔的內容，當然也可以用它來添加節點。下面我們來看另外一種想文檔中添加節點的方式——使用標準的DOM方法。
使用DOM方法修改文檔比使用innerHTML要麻煩一些，我們先來看一段樣本HTML代碼：
<div id="test" style="border:1pxsolid"></div>
使用DOM方法添加一個段落節點的思路如下：
建立一個p節點
穿件一個文本節點，並且添加到p節點中
將p節點添加到div中
執行個體JavaScript代碼
按照上面的思路我們得出如下的JS代碼：
<script type="text/javascript">
function test(){
        var test =document.getElementById("test");
        var para = document.createElement("P");
        var text =document.createTextNode("要添加的文本");
        para.appendChild(text);
        test.appendChild(para);
}      
</script>
添加節點的效果
下面就是原來的div，由於沒有內容，我們只能看到邊框。
添加節點 ，點擊這個按鈕就可以運行上面的代碼。可以看到上面的div裡多出了我們創造的段落節點。
代碼解釋
首先，我們用到了var para =document.createElement("P");該語句建立了一個段落節點，但是它並不會馬上出現在文檔中。要建立其它節點，只需要吧傳遞給該函數的字串參數修改一些即可，例如document.createElement("DIV")。
var text = document.createTextNode("要添加的文本");一句建立了一個文本節點。
para.appendChild(text);將text作為子結點添加到para這個段落節點上。很容易看出，appendChild的調用文法如下：父節點.appendChild.(子結點)。
最後一句test.appendChild(para);則將段落節點para添加到test這個div節點上，由於test節點原來就是文檔的一部分，這一句會造成文檔的更新，也就是我們會看到段落文字被添加到了div節點裡。

摘自 劉海闖的專欄