Node 對(duì)象中提供了 nodeName、nodeType 和 nodeValue 分別可以用于獲取指定節(jié)點(diǎn)的節(jié)點(diǎn)名稱(chēng)、節(jié)點(diǎn)類(lèi)型和節(jié)點(diǎn)的值。
DOM 節(jié)點(diǎn)樹(shù)結(jié)構(gòu)中,我們實(shí)際開(kāi)發(fā)最常見(jiàn)的節(jié)點(diǎn)有:
| 節(jié)點(diǎn)名稱(chēng) | 含義 |
| --- | --- |
| 元素節(jié)點(diǎn) | 表示 HTML 頁(yè)面中的標(biāo)簽(即 HTML 頁(yè)面的結(jié)構(gòu))| 當(dāng)訪問(wèn) DOM 樹(shù)時(shí),需要從查找元素節(jié)點(diǎn)開(kāi)始 |
| 屬性節(jié)點(diǎn) | 表示 HTML 頁(yè)面中的開(kāi)始標(biāo)簽包含的屬性 |
| 文本節(jié)點(diǎn) | 表示 HTML 頁(yè)面中的標(biāo)簽所包含的文本內(nèi)容 |
## nodeName 屬性
Node 對(duì)象的 nodeName 屬性用于獲取指定節(jié)點(diǎn)的節(jié)點(diǎn)名稱(chēng)。具體的語(yǔ)法結(jié)構(gòu)如下:
```javascript
var str = node.nodeName;
```
在上述語(yǔ)法結(jié)構(gòu)中,str 是一個(gè)存儲(chǔ)了當(dāng)前節(jié)點(diǎn)的節(jié)點(diǎn)名稱(chēng)的字符串。
> **值得注意的是:** nodeName 是一個(gè)只讀屬性。
針對(duì)不同的節(jié)點(diǎn)類(lèi)型,nodeName 返回的節(jié)點(diǎn)名稱(chēng)是不同的:
| 節(jié)點(diǎn)類(lèi)型 | nodeName 屬性的值 |
| --- | --- |
| Document 文檔節(jié)點(diǎn) | "#document" |
| Element 元素節(jié)點(diǎn) | 元素節(jié)點(diǎn)的元素名 |
| Attr 屬性節(jié)點(diǎn) | 屬性節(jié)點(diǎn)的屬性名 |
| Text 文本節(jié)點(diǎn) | "#text" |
如下代碼示例,測(cè)試元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)和文本節(jié)點(diǎn)的 nodeName 的值:
```javascript
// 獲取元素節(jié)點(diǎn)
var elemNode = document.getElementById('btn');
// 獲取屬性節(jié)點(diǎn)
var attrNode = elemNode.getAttributeNode('title');
// 獲取文本節(jié)點(diǎn)
var textNode = elemNode.firstChild;
console.log('元素節(jié)點(diǎn)的nodeName: ' + elemNode.nodeName);
console.log('屬性節(jié)點(diǎn)的nodeName: ' + attrNode.nodeName);
console.log('文本節(jié)點(diǎn)的nodeName: ' + textNode.nodeName);
```
## nodeType 屬性
Node 對(duì)象的 nodeType 屬性用于獲取指定節(jié)點(diǎn)的節(jié)點(diǎn)類(lèi)型。具體的語(yǔ)法結(jié)構(gòu)如下:
```javascript
var type = node.nodeType;
```
在上述語(yǔ)法結(jié)構(gòu)中,type 是一個(gè)整數(shù),其代表的是節(jié)點(diǎn)類(lèi)型。
針對(duì)不同的節(jié)點(diǎn)類(lèi)型,nodeType 返回的節(jié)點(diǎn)類(lèi)型是不同的:
| 節(jié)點(diǎn)類(lèi)型 | nodeType 屬性的值 |
| --- | --- |
| Document 文檔節(jié)點(diǎn) | 9 |
| Element 元素節(jié)點(diǎn) | 1 |
| Attr 屬性節(jié)點(diǎn) | 2 |
| Text 文本節(jié)點(diǎn) | 3 |
如下代碼示例,測(cè)試元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)和文本節(jié)點(diǎn)的 nodeType 的值:
```javascript
// 獲取元素節(jié)點(diǎn)
var elemNode = document.getElementById('btn');
// 獲取屬性節(jié)點(diǎn)
var attrNode = elemNode.getAttributeNode('title');
// 獲取文本節(jié)點(diǎn)
var textNode = elemNode.firstChild;
console.log('元素節(jié)點(diǎn)的nodeType: ' + elemNode.nodeType);
console.log('屬性節(jié)點(diǎn)的nodeType: ' + attrNode.nodeType);
console.log('文本節(jié)點(diǎn)的nodeType: ' + textNode.nodeType);
```
## nodeValue 屬性
Node 對(duì)象的 nodeValue 屬性用于獲取指定節(jié)點(diǎn)的節(jié)點(diǎn)值。具體的語(yǔ)法結(jié)構(gòu)如下:
```javascript
var value = node.nodeValue;
```
在上述語(yǔ)法結(jié)構(gòu)中,value 是一個(gè)包含當(dāng)前節(jié)點(diǎn)的值的字符串。
針對(duì)不同的節(jié)點(diǎn)類(lèi)型,nodeValue 返回的節(jié)點(diǎn)類(lèi)型是不同的:
| 節(jié)點(diǎn)類(lèi)型 | nodeValue 屬性的值 |
| --- | --- |
| Document 文檔節(jié)點(diǎn) | null |
| Element 元素節(jié)點(diǎn) | null |
| Attr 屬性節(jié)點(diǎn) | 屬性節(jié)點(diǎn)的屬性值 |
| Text 文本節(jié)點(diǎn) | 文本節(jié)點(diǎn)的內(nèi)容 |
如下代碼示例,測(cè)試元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)和文本節(jié)點(diǎn)的 nodeValue 的值:
```javascript
// 獲取元素節(jié)點(diǎn)
var elemNode = document.getElementById('btn');
// 獲取屬性節(jié)點(diǎn)
var attrNode = elemNode.getAttributeNode('title');
// 獲取文本節(jié)點(diǎn)
var textNode = elemNode.firstChild;
console.log('元素節(jié)點(diǎn)的nodeValue: ' + elemNode.nodeValue);
console.log('屬性節(jié)點(diǎn)的nodeValue: ' + attrNode.nodeValue);
console.log('文本節(jié)點(diǎn)的nodeValue: ' + textNode.nodeValue);
```
- 關(guān)于
- 第一章 DOM 是什么
- 第一節(jié) DOM 介紹
- 第二節(jié) DOM 樹(shù)結(jié)構(gòu)
- 第二章 Document 對(duì)象
- 第一節(jié) Document 對(duì)象介紹
- 第二節(jié) 定位頁(yè)面元素
- 第三節(jié) 創(chuàng)建頁(yè)面元素
- 第三章 Node 對(duì)象
- 第一節(jié) Node 對(duì)象介紹
- 第二節(jié) 判斷節(jié)點(diǎn)類(lèi)型
- 第三節(jié) 遍歷節(jié)點(diǎn)
- 第四節(jié) 插入節(jié)點(diǎn)
- 第五節(jié) 刪除節(jié)點(diǎn)
- 第六節(jié) 替換節(jié)點(diǎn)
- 第七節(jié) 復(fù)制節(jié)點(diǎn)
- 第八節(jié) textContent 屬性
- 第四章 Element 對(duì)象
- 第一節(jié) Element 對(duì)象介紹
- 第二節(jié) DOM 元素樹(shù)
- 第三節(jié) 定位頁(yè)面元素
- 第四節(jié) 遍歷元素
- 第五節(jié) 屬性操作
- 第六節(jié) innerHTML 屬性
- 第五章 樣式操作
- 第一節(jié) 獲取內(nèi)聯(lián)樣式
- 第二節(jié) 獲取外聯(lián)樣式表
- 第三節(jié) 獲取 class 屬性
- 第四節(jié) 獲取當(dāng)前有效樣式
- 第五節(jié) 設(shè)置內(nèi)聯(lián)樣式
- 第六節(jié) 設(shè)置 class 屬性
- 第七節(jié) Element 對(duì)象的樣式屬性
- 第六章 事件
- 第一節(jié) 什么是事件
- 第二節(jié) 注冊(cè)事件
- 第三節(jié) 移除注冊(cè)事件
- 第四節(jié) Event 事件對(duì)象
- 第五節(jié) 獲取目標(biāo)元素
- 第六節(jié) 阻止默認(rèn)行為
- 第七節(jié) 獲取鼠標(biāo)坐標(biāo)
- 第八節(jié) 事件流
- 第九節(jié) 事件委托
- 第七章 表單操作
- 第一節(jié) 獲取表單
- 第二節(jié) 表單操作
- 第三節(jié) 表單驗(yàn)證
- 第四節(jié) 表單提交
- 第八章 BOM
- 第一節(jié) BOM 是什么
- 第二節(jié) Window 對(duì)象
- 第三節(jié) Navigator 對(duì)象
- 第四節(jié) History 對(duì)象
- 第五節(jié) Location 對(duì)象
- 第六節(jié) 定時(shí)器
