資訊專(zhuān)欄INFORMATION COLUMN
摘要：對(duì)象中提供了和分別可以用于獲取指定節(jié)點(diǎn)的節(jié)點(diǎn)名稱(chēng)節(jié)點(diǎn)類(lèi)型和節(jié)點(diǎn)的值。具體的語(yǔ)法結(jié)構(gòu)如下在上述語(yǔ)法結(jié)構(gòu)中，是一個(gè)整數(shù)，其代表的是節(jié)點(diǎn)類(lèi)型。本教程采用知識(shí)共享署名非商業(yè)性使用禁止演繹國(guó)際許可協(xié)議進(jìn)行許可。
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)） |
| 屬性節(jié)點(diǎn) | 表示 HTML 頁(yè)面中的開(kāi)始標(biāo)簽包含的屬性 |
| 文本節(jié)點(diǎn) | 表示 HTML 頁(yè)面中的標(biāo)簽所包含的文本內(nèi)容 |
Node 對(duì)象的 nodeName 屬性用于獲取指定節(jié)點(diǎn)的節(jié)點(diǎn)名稱(chēng)。具體的語(yǔ)法結(jié)構(gòu)如下:
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 的值:
// 獲取元素節(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)如下:
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 的值:
// 獲取元素節(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)如下:
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 的值:
// 獲取元素節(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);
本教程免費(fèi)開(kāi)源，任何人都可以免費(fèi)學(xué)習(xí)、分享，甚至可以進(jìn)行修改。但需要注明作者及來(lái)源，并且不能用于商業(yè)。
本教程采用知識(shí)共享署名-非商業(yè)性使用-禁止演繹 4.0 國(guó)際許可協(xié)議進(jìn)行許可。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84293.html
摘要：對(duì)象提供了一系列的屬性和方法用來(lái)利用節(jié)點(diǎn)樹(shù)結(jié)構(gòu)中節(jié)點(diǎn)的關(guān)系實(shí)現(xiàn)遍歷其中的節(jié)點(diǎn)。在上述語(yǔ)法結(jié)構(gòu)中，屬性返回指定節(jié)點(diǎn)的父元素節(jié)點(diǎn)。該屬性獲取一個(gè)包含指定節(jié)點(diǎn)的所有子節(jié)點(diǎn)的集合。值得注意的是及之前版本的瀏覽器中不存在空白節(jié)點(diǎn)問(wèn)題。 Node 對(duì)象提供了一系列的屬性和方法用來(lái)利用 DOM 節(jié)點(diǎn)樹(shù)結(jié)構(gòu)中節(jié)點(diǎn)的關(guān)系實(shí)現(xiàn)遍歷其中的節(jié)點(diǎn)。 關(guān)于節(jié)點(diǎn)之間的關(guān)系，可以參考《DOM樹(shù)結(jié)構(gòu)》一節(jié)有關(guān)節(jié)點(diǎn)之間關(guān)...
摘要：對(duì)象提供了一些方法實(shí)現(xiàn)元素的屬性操作，這種操作要比對(duì)象提供的方法操作屬性節(jié)點(diǎn)要更便捷。值得注意的是如果指定的屬性不存在，則返回或空字符串。如果刪除的屬性不存在的話(huà)，不會(huì)引發(fā)任何異常。 Element 對(duì)象提供了一些方法實(shí)現(xiàn) HTML 元素的屬性操作，這種操作要比 Node 對(duì)象提供的方法操作屬性節(jié)點(diǎn)要更便捷。 獲取指定元素的屬性 Element 對(duì)象提供了 getAttribute()...
摘要：簡(jiǎn)單來(lái)說(shuō)，節(jié)點(diǎn)作為樹(shù)結(jié)構(gòu)中的連接點(diǎn)，最終構(gòu)成了完整的樹(shù)結(jié)構(gòu)。節(jié)點(diǎn)樹(shù)結(jié)構(gòu)通過(guò)節(jié)點(diǎn)概念，我們可以將原本的樹(shù)結(jié)構(gòu)改成節(jié)點(diǎn)樹(shù)結(jié)構(gòu)進(jìn)行表示。節(jié)點(diǎn)之間的關(guān)系中的表示模型，也可以用來(lái)表示節(jié)點(diǎn)樹(shù)結(jié)構(gòu)中節(jié)點(diǎn)之間的關(guān)系。值得注意的是和元素并不是兄弟關(guān)系。 DOM 樹(shù)結(jié)構(gòu) DOM 之所以可以訪(fǎng)問(wèn)和更新 HTML 頁(yè)面中的內(nèi)容、結(jié)構(gòu)和樣式，是因?yàn)?DOM 將 HTML 頁(yè)面解析為一個(gè) 樹(shù)結(jié)構(gòu)。 例如下面這段代...
摘要：系列教程是一套免費(fèi)開(kāi)源，任何人都可以免費(fèi)學(xué)習(xí)分享，甚至可以進(jìn)行修改。本文是這套系列教程的索引也就是目錄第一回介紹在最開(kāi)始，我們先來(lái)了解是什么的作用，以及瀏覽器的支持是怎么樣的。 《EASYDOM》系列教程是一套免費(fèi)、開(kāi)源，任何人都可以免費(fèi)學(xué)習(xí)、分享，甚至可以進(jìn)行修改。但需要注明作者及來(lái)源，并且不能用于商業(yè)。 本文是這套系列教程的索引（也就是目錄）: 第一回 DOM 介紹 在最開(kāi)始，我...
摘要：對(duì)象提供了方法實(shí)現(xiàn)從頁(yè)面中刪除指定節(jié)點(diǎn)。其語(yǔ)法結(jié)構(gòu)如下在上述語(yǔ)法結(jié)構(gòu)中，調(diào)用方法的表示參數(shù)的父節(jié)點(diǎn)，而參數(shù)則表示要?jiǎng)h除的那個(gè)節(jié)點(diǎn)。則用于存儲(chǔ)要?jiǎng)h除的節(jié)點(diǎn)的引用，即。 Node 對(duì)象提供了 removeChild() 方法實(shí)現(xiàn)從 HTML 頁(yè)面中刪除指定節(jié)點(diǎn)。其語(yǔ)法結(jié)構(gòu)如下: var oldChild = node.removeChild(child); OR element.remov...
閱讀 909·2021-11-15 11:38
閱讀 2555·2021-09-08 09:45
閱讀 2864·2021-09-04 16:48
閱讀 2599·2019-08-30 15:54
閱讀 960·2019-08-30 13:57
閱讀 1656·2019-08-29 15:39
閱讀 530·2019-08-29 12:46
閱讀 3554·2019-08-26 13:39
