【EASYDOM系列教程】之判斷節點類型

CocoaChina 發布于2019-08-20 18:17 / 2109人閱讀

摘要：對象中提供了和分別可以用于獲取指定節點的節點名稱節點類型和節點的值。具體的語法結構如下在上述語法結構中，是一個整數，其代表的是節點類型。本教程采用知識共享署名非商業性使用禁止演繹國際許可協議進行許可。

Node 對象中提供了 nodeName、nodeType 和 nodeValue 分別可以用于獲取指定節點的節點名稱、節點類型和節點的值。

DOM 節點樹結構中，我們實際開發最常見的節點有:

節點名稱	含義
元素節點	表示 HTML 頁面中的標簽（即 HTML 頁面的結構）
屬性節點	表示 HTML 頁面中的開始標簽包含的屬性
文本節點	表示 HTML 頁面中的標簽所包含的文本內容

nodeName 屬性

Node 對象的 nodeName 屬性用于獲取指定節點的節點名稱。具體的語法結構如下:

var str = node.nodeName;

在上述語法結構中，str 是一個存儲了當前節點的節點名稱的字符串。

值得注意的是: nodeName 是一個只讀屬性。

針對不同的節點類型，nodeName 返回的節點名稱是不同的:

節點類型	nodeName 屬性的值
Document 文檔節點	"#document"
Element 元素節點	元素節點的元素名
Attr 屬性節點	屬性節點的屬性名
Text 文本節點	"#text"

如下代碼示例，測試元素節點、屬性節點和文本節點的 nodeName 的值:

// 獲取元素節點
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 屬性用于獲取指定節點的節點類型。具體的語法結構如下:

var type = node.nodeType;

在上述語法結構中，type 是一個整數，其代表的是節點類型。

針對不同的節點類型，nodeType 返回的節點類型是不同的:

節點類型	nodeType 屬性的值
Document 文檔節點	9
Element 元素節點	1
Attr 屬性節點	2
Text 文本節點	3

如下代碼示例，測試元素節點、屬性節點和文本節點的 nodeType 的值:

// 獲取元素節點
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 屬性用于獲取指定節點的節點值。具體的語法結構如下:

var value = node.nodeValue;

在上述語法結構中，value 是一個包含當前節點的值的字符串。

針對不同的節點類型，nodeValue 返回的節點類型是不同的:

節點類型	nodeValue 屬性的值
Document 文檔節點	null
Element 元素節點	null
Attr 屬性節點	屬性節點的屬性值
Text 文本節點	文本節點的內容

如下代碼示例，測試元素節點、屬性節點和文本節點的 nodeValue 的值:

// 獲取元素節點
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);

本教程免費開源，任何人都可以免費學習、分享，甚至可以進行修改。但需要注明作者及來源，并且不能用于商業。

本教程采用知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議進行許可。

云服務器 GPU云服務器系列之系列之二架構之坑系列 linux系列教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84293.html

【EASYDOM系列教程】之遍歷節點

摘要：對象提供了一系列的屬性和方法用來利用節點樹結構中節點的關系實現遍歷其中的節點。在上述語法結構中，屬性返回指定節點的父元素節點。該屬性獲取一個包含指定節點的所有子節點的集合。值得注意的是及之前版本的瀏覽器中不存在空白節點問題。 Node 對象提供了一系列的屬性和方法用來利用 DOM 節點樹結構中節點的關系實現遍歷其中的節點。關于節點之間的關系，可以參考《DOM樹結構》一節有關節點之間關...

BigNerdCoding 2019-08-20 18:18 評論0 收藏0
【EASYDOM系列教程】之屬性操作

摘要：對象提供了一些方法實現元素的屬性操作，這種操作要比對象提供的方法操作屬性節點要更便捷。值得注意的是如果指定的屬性不存在，則返回或空字符串。如果刪除的屬性不存在的話，不會引發任何異常。 Element 對象提供了一些方法實現 HTML 元素的屬性操作，這種操作要比 Node 對象提供的方法操作屬性節點要更便捷。獲取指定元素的屬性 Element 對象提供了 getAttribute()...

BigNerdCoding 2019-08-21 11:59 評論0 收藏0
【EASYDOM系列教程】之DOM 樹結構

摘要：簡單來說，節點作為樹結構中的連接點，最終構成了完整的樹結構。節點樹結構通過節點概念，我們可以將原本的樹結構改成節點樹結構進行表示。節點之間的關系中的表示模型，也可以用來表示節點樹結構中節點之間的關系。值得注意的是和元素并不是兄弟關系。 DOM 樹結構 DOM 之所以可以訪問和更新 HTML 頁面中的內容、結構和樣式，是因為 DOM 將 HTML 頁面解析為一個樹結構。例如下面這段代...

nemo 2019-08-20 17:50 評論0 收藏0
【EASYDOM系列教程】索引

摘要：系列教程是一套免費開源，任何人都可以免費學習分享，甚至可以進行修改。本文是這套系列教程的索引也就是目錄第一回介紹在最開始，我們先來了解是什么的作用，以及瀏覽器的支持是怎么樣的。《EASYDOM》系列教程是一套免費、開源，任何人都可以免費學習、分享，甚至可以進行修改。但需要注明作者及來源，并且不能用于商業。本文是這套系列教程的索引（也就是目錄）: 第一回 DOM 介紹在最開始，我...

yanwei 2019-08-21 11:51 評論0 收藏0
【EASYDOM系列教程】之刪除節點

摘要：對象提供了方法實現從頁面中刪除指定節點。其語法結構如下在上述語法結構中，調用方法的表示參數的父節點，而參數則表示要刪除的那個節點。則用于存儲要刪除的節點的引用，即。 Node 對象提供了 removeChild() 方法實現從 HTML 頁面中刪除指定節點。其語法結構如下: var oldChild = node.removeChild(child); OR element.remov...

zzbo 2019-08-20 18:23 評論0 收藏0