【EASYDOM系列教程】之判断节点类型

CocoaChina 发布于2019-08-20 18:17 / 2081人阅读

摘要：对象中提供了和分别可以用于获取指定节点的节点名称节点类型和节点的值。具体的语法结构如下在上述语法结构中，是一个整数，其代表的是节点类型。本教程采用知识共享署名非商业性使用禁止演绎国际许可协议进行许可。

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系列教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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