【EASYDOM系列教程】之推断节点范例

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 国际允许协定举行允许。

《【EASYDOM系列教程】之推断节点范例》

    原文作者:二月红
    原文地址: https://segmentfault.com/a/1190000010337850
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞