Node 對象中提供了 nodeName、nodeType 和 nodeValue 分別可以用于獲取指定節點的節點名稱、節點類型和節點的值。 DOM 節點樹結構中，我們實際開發最常見的節點有: | 節點名稱 | 含義 | | --- | --- | | 元素節點 | 表示 HTML 頁面中的標簽（即 HTML 頁面的結構）| 當訪問 DOM 樹時，需要從查找元素節點開始 | | 屬性節點 | 表示 HTML 頁面中的開始標簽包含的屬性 | | 文本節點 | 表示 HTML 頁面中的標簽所包含的文本內容 | ## nodeName 屬性 Node 對象的 nodeName 屬性用于獲取指定節點的節點名稱。具體的語法結構如下: ```javascript var str = node.nodeName; ``` 在上述語法結構中，str 是一個存儲了當前節點的節點名稱的字符串。 > **值得注意的是:** nodeName 是一個只讀屬性。 針對不同的節點類型，nodeName 返回的節點名稱是不同的: | 節點類型 | nodeName 屬性的值 | | --- | --- | | Document 文檔節點 | "#document" | | Element 元素節點 | 元素節點的元素名 | | Attr 屬性節點 | 屬性節點的屬性名 | | Text 文本節點 | "#text" | 如下代碼示例，測試元素節點、屬性節點和文本節點的 nodeName 的值: ```javascript // 獲取元素節點 var elemNode = document.getElementById('btn'); // 獲取屬性節點 var attrNode = elemNode.getAttributeNode('title'); // 獲取文本節點 var textNode = elemNode.firstChild; console.log('元素節點的nodeName: ' + elemNode.nodeName); console.log('屬性節點的nodeName: ' + attrNode.nodeName); console.log('文本節點的nodeName: ' + textNode.nodeName); ``` ## nodeType 屬性 Node 對象的 nodeType 屬性用于獲取指定節點的節點類型。具體的語法結構如下: ```javascript var type = node.nodeType; ``` 在上述語法結構中，type 是一個整數，其代表的是節點類型。 針對不同的節點類型，nodeType 返回的節點類型是不同的: | 節點類型 | nodeType 屬性的值 | | --- | --- | | Document 文檔節點 | 9 | | Element 元素節點 | 1 | | Attr 屬性節點 | 2 | | Text 文本節點 | 3 | 如下代碼示例，測試元素節點、屬性節點和文本節點的 nodeType 的值: ```javascript // 獲取元素節點 var elemNode = document.getElementById('btn'); // 獲取屬性節點 var attrNode = elemNode.getAttributeNode('title'); // 獲取文本節點 var textNode = elemNode.firstChild; console.log('元素節點的nodeType: ' + elemNode.nodeType); console.log('屬性節點的nodeType: ' + attrNode.nodeType); console.log('文本節點的nodeType: ' + textNode.nodeType); ``` ## nodeValue 屬性 Node 對象的 nodeValue 屬性用于獲取指定節點的節點值。具體的語法結構如下: ```javascript var value = node.nodeValue; ``` 在上述語法結構中，value 是一個包含當前節點的值的字符串。 針對不同的節點類型，nodeValue 返回的節點類型是不同的: | 節點類型 | nodeValue 屬性的值 | | --- | --- | | Document 文檔節點 | null | | Element 元素節點 | null | | Attr 屬性節點 | 屬性節點的屬性值 | | Text 文本節點 | 文本節點的內容 | 如下代碼示例，測試元素節點、屬性節點和文本節點的 nodeValue 的值: ```javascript // 獲取元素節點 var elemNode = document.getElementById('btn'); // 獲取屬性節點 var attrNode = elemNode.getAttributeNode('title'); // 獲取文本節點 var textNode = elemNode.firstChild; console.log('元素節點的nodeValue: ' + elemNode.nodeValue); console.log('屬性節點的nodeValue: ' + attrNode.nodeValue); console.log('文本節點的nodeValue: ' + textNode.nodeValue); ```