EASYDOM系列教程 之判斷節點型別

node 物件中提供了 nodename、nodetype 和 nodevalue 分別可以用於獲取指定節點的節點名稱、節點型別和節點的值。

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

節點名稱

含義元素節點

表示 html 頁面中的標籤（即 html 頁面的結構）

屬性節點

表示 html 頁面中的開始標籤包含的屬性

文字節點

表示 html 頁面中的標籤所包含的文字內容

node 物件的 nodename 屬性用於獲取指定節點的節點名稱。具體的語法結構如下:

var str = node.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);

var type = node.nodetype;

針對不同的節點型別，nodetype 返回的節點型別是不同的:

節點型別

nodetype 屬性的值

document 文件節點

9element 元素節點

1attr 屬性節點

2text 文字節點

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);

var value = node.nodevalue;

針對不同的節點型別，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 國際許可協議進行許可。

EASYDOM系列教程 之屬性操作

element 物件提供了一些方法實現 html 元素的屬性操作，這種操作要比 node 物件提供的方法操作屬性節點要更便捷。element 物件提供了 getattribute 方法用於獲取指定元素的屬性值，其語法結構如下 var attribute element.getattribute at...

EASYDOM系列教程 之插入節點

node 物件提供了一些用於向 html 頁面插入節點的方法，通過這些方法我們可以實現向 html 頁面新增元素，或者移動 html 頁面中的元素。var parent document.getelementbyid parent var button document.createelement ...

EASYDOM系列教程 之Node介紹

dom 的標準規範中提供了 node 物件，該物件主要提供了用於解析 dom 節點樹結構的屬性和方法。dom 樹結構主要是依靠節點進行解析，稱為 dom 節點樹結構。node 物件是解析 dom 節點樹結構的主要入口。node 物件提供的屬性和方法，可以實現遍歷節點 插入節點和替換節點等操作。而這些...