【轉】JavaScript獲取節點類型、節點名稱和節點值

DOM節點信息包括節點類型（nodeType）、節點名稱（nodeName）和節點值（nodeValue）。

節點類型

DOM節點中，每一個節點都擁有不一樣的類型。

W3C規範中經常使用的 DOM節點類型有如下幾種：

節點類型	說明	值
元素節點	每個HTML標籤都是一個元素節點，如 <div> 、 <p>、<ul>等	1
屬性節點	元素節點（HTML標籤）的屬性，如 id 、class 、name 等。	2
文本節點	元素節點或屬性節點中的文本內容。	3
註釋節點	表示文檔註釋，形式爲<!-- comment text -->。	8
文檔節點	表示整個文檔（DOM 樹的根節點，即 document ）	9

獲取節點類型的語法：
    nodeObject.nodeType
其中，nodeObject 爲DOM節點（節點對象）。該屬性返回以數字表示的節點類型，例如，元素節點返回 1，屬性節點返回 2 。

例如，獲取id="demo"的<div>標籤的節點類型：

1. document.getElementById("demo").nodeType;

該語句的返回值爲 1 。

舉例，獲取元素節點和文本節點的類型值：

1. <div id="demo1">點擊這裏顯示節點類型</div>
2. <script type="text/javascript">
3. document.getElementById("demo1").onclick=function(){
4. var divType=this.nodeType;
5. var textType=this.firstChild.nodeType;  //  this 指當前發生事件的HTML元素，這裏是<div>標籤
6. alert(
7. "<div>標籤的節點類型是："+divType+"\n"+
8. "<div>標籤內部文本的節點類型是："+textType
9. );
10. }
11. </script>

節點名稱

節點名稱就是DOM節點的名字，不一樣類型的節點對應不一樣的節點名稱。

節點類型	節點名稱
元素節點	HTML標籤的名稱（大寫）
屬性節點	屬性的名稱
文本節點	它的值永遠是#text
文檔節點	它的值永遠是#document

獲取節點名稱的語法：
    nodeObject.nodeName
其中，nodeObject 爲DOM節點（節點對象）。

例如，獲取id="demo"的<div>標籤的節點名稱：

1. document.getElementById("demo").nodeName;

該語句的返回值爲 DIV 。

舉例，獲取元素節點名稱、文本節點名稱和文檔節點名稱：

1. <div id="demo2">點擊這裏顯示節點名稱</div>
2. <script type="text/javascript">
3. document.getElementById("demo2").onclick=function(){
4. var divName=this.nodeName;
5. var textName=this.firstChild.nodeName;  //  this 指當前發生事件的HTML元素，這裏是<div>標籤
6. var documentName=document.nodeName
7. alert(
8. "<div>標籤的節點名稱是："+divName+"\n"+
9. "<div>標籤內部文本的節點名稱是："+textName+"\n"+
10. "文檔節點的節點名稱是："+documentName
11. );
12. }
13. </script>

節點值

對於文本節點，節點值爲文本內容；對於屬性節點，節點值爲屬性的值。

節點值對於文檔節點和元素節點是不可用的。

獲取節點值的語法：
    nodeObject.nodeValue
其中，nodeObject 爲DOM節點（節點對象）。

舉例，獲取文本節點的節點值：

1. <div id="demo3">點擊這裏顯示文本節點的值</div>
2. <script type="text/javascript">
3. document.getElementById("demo3").onclick=function(){
4. alert(this.firstChild.nodeValue);  //  this 指當前發生事件的HTML元素，這裏是<div>標籤
5. }
6. </script>

 

來自：http://www.itxueyuan.org/view/6346.html