DOM中的node(节点)有关的三个属性--nodeType、nodeName、nodeValue

DOM中的node(节点)有关的三个属性–nodeType、nodeName、nodeValue

上篇博文我们讲到了如何通过DOM获取HTML文档中的元素，在这里要明白一点，当我们获取到具体的某一个元素的时候这个元素就是一个元素节点。说到节点，我们不可避免的有三个属性很有必要了解一下：nodeType、nodeName、nodeValue。

1.nodeType属性

每个节点都有一个 nodeType 属性，用于表明节点的类型，节点类型由 Node 类型中定义12个常量表示：

常量名	常量(返回)值	节点类型	描述
Node.ELEMENT_NODE	1	Element	代表元素
Node.ATTRIBUTE_NODE	2	Attr	代表属性
Node.TEXT_NODE	3	Text	代表元素或属性中的文本内容
Node.CDATA_SECTION_NODE	4	CDATASection	代表文档中的 CDATA 部（不会由解析器解析的文本）
Node.ENTITY_REFERENCE_NODE	5	EntityReference	代表实体引用
Node.ENTITY_NODE	6	Entity	代表实体
Node.PROCESSING_INSTRUCTION_NODE	7	ProcessingInstruction	代表处理指令
Node.COMMENT_NODE	8	Comment	代表注释
Node.DOCUMENT_NODE	9	Document	代表整个文档（DOM 树的根节点）
Node.DOCUMENT_TYPE_NODE	10	DocumentType	向为文档定义的实体提供接口
Node.DOCUMENT_FRAGMENT_NODE	11	DocumentFragment	代表轻量级的 Document 对象（文档的某个部分）
Node.NOTATION_NODE	12	Notation	代表 DTD 中声明的符号

注：以上红色部分为平时最常用的节点类型。

    <div class="wrap" id="wrap"><p id="text" class="text">这是一个段落</p><ul class="list"><li class="item">列表01</li><li>列表02</li><li>列表03</li><li>列表04</li></ul></div>

当然上面表格中是采用常量的方式来返回节点类型，接下来我们说一下怎样通过nodeType属性返回元素的类型：

    var oWrap=document.getElementsByClassName("wrap")[0];// var oWrap=document.getElementById('wrap');var oText=document.getElementById("text");// 通过节点 获取元素   node.get。。。。// var oText=oWrap.getElementsByClassName("text");var oList=document.getElementsByClassName("list");console.log(oWrap);console.log(oText);console.log(oList);// 1.节点分类  nodeType  返回节点类型  1(元素节点)  3(文本节点) 2(属性节点)  8(注释节点)  9(document)console.log(oWrap.nodeType);//1   当获取的是HTML集合时 返回undefinedconsole.log(oText.nodeType);//1console.log(oList.nodeType);//1var textNode=oText.firstChild;console.log(textNode.nodeType);//3  文本节点var attrNode=oText.getAttributeNode("id");console.log(attrNode.nodeType);//2  属性节点console.log(document.nodeType);//9

注：使用nodeType属性时一定要确保获取到的是节点而不是节点对应的值。

2.nodeName属性

返回节点的名称。

    // 元素节点返回 大写的标签名console.log(oWrap.nodeName);//DIV  console.log(oText.nodeName);//Pconsole.log(oList[0].nodeName);//UL  // 属性节点 返回 属性名console.log(attrNode.nodeName);//id// 文本节点  返回 #textvar oItem=document.getElementsByClassName("item")[0];var itemText=oItem.firstChild;console.log(textNode.nodeName);//#textconsole.log(itemText.nodeName);//#text

3.nodeValue属性

返回节点的值。

    // 元素节点 返回nullconsole.log(oWrap.nodeValue);//console.log(oText.nodeValue);console.log(oList[0].nodeValue);// 属性节点  返回属性值console.log(attrNode.nodeValue);//text// 文本节点   返回文本内容console.log(textNode.nodeValue);//这是一个段落

**注意：**以上三个属性经常会被初学者忽略掉，但是实际应用中所有的浏览器都支持这些属性，可以用来当作判断条件使用。

视频讲解链接：
https://www.bilibili.com/video/BV17t4y1C745/

DOM中的node(节点)有关的三个属性--nodeType、nodeName、nodeValue相关推荐

html5中的dom中的各种节点的层次关系是怎样的
html5中的dom中的各种节点的层次关系是怎样的一.总结一句话总结:Node节点是所有节点的基类,所以都继承它的方法 1.dom提供在js中动态修改html标签的作用比如增加修改标签等,并且是 ...
Kubernetes集群中部署Node节点
Kubernetes集群中的Node节点部署 kubernetes的Node节点包含如下组件: flanneld docker kubelet kube-proxy 环境变量需要的变量. $ # 替 ...
java中删除node节点_[Java]LeetCode237. 删除链表中的节点 | Delete Node in a Linked List
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ➤微信公众号:山青咏芝(shanqingyongzhi) ➤博客园地址:山青咏芝(https://www.cnblog ...
DOM节点中属性nodeName、nodeType和nodeValue的区别 Delphi
http://msdn.microsoft.com/zh-cn/library/vstudio/hf9hbf87.aspx <?xml version="1.0"?>& ...
前端：JS/25/DOM官方定义，DOM分类，HTML节点树（节点关系，节点类型，），核心DOM中公共的属性和方法（节点访问，查找DOM节点，节点属性，节点的创建，追加和删除）
DOM官方定义 DOM,Document Object Model,文档对象模型,我们可以把网页中的所有"东西"看成是对象": DOM的官方定义:DOM可以使用脚本,动态 ...
在Unity中创建基于Node节点的编辑器（一）
孙广东 2018.5.13 Unity AssetStore中关于Node节点编辑器相关的插件可是数不胜数, 状态机,行为树,Shader 可视化等等. Unity自己也有 Animator的 ...
文档对象模型DOM（获取元素节点、设置节点属性）
练习题: 制作一个表格,显示班级的学生信息. 要求: 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮,能动态在最后添加一行 3. 点 ...
DOM中的动态NodeList与静态NodeList
GitHub版本: https://github.com/cncounter/translation/blob/master/tiemao_2014/NodeList/NodeList.md 副标题: ...
k8s node节点停机维护，pod如何迁移？
需求 k8s集群中的node节点要升级内存,以应对服务迁入.pod扩缩容导致的资源短缺,需要对node节点进行停机维护,那么此时node节点上的pod应该如何处理呢? 下面我们来看一下. 默认迁移当 ...