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 代表元素Nod

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 中声明的符号


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


<divclass="wrap"id="wrap"><pid="text"class="text">这是一个段落</p><ulclass="list"><liclass="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集合时 返回undefined
    console.log(oText.nodeType);//1
    console.log(oList.nodeType);//1
    var 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属性


返回节点的名称。


    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集合时 返回undefined
    console.log(oText.nodeType);//1
    console.log(oList.nodeType);//1
    var textNode=oText.firstChild;
    console.log(textNode.nodeType);//3  文本节点
    var attrNode=oText.getAttributeNode("id");
    console.log(attrNode.nodeType);//2  属性节点
    console.log(document.nodeType);//9


3.nodeValue属性


返回节点的值。

    // 元素节点 返回null
    console.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/

相关文章
|
3月前
|
运维 Kubernetes API
解决Kubernetes集群中master节点无法与node节点通信的策略。
这些策略不仅需要执行命令来获取信息,更要深入理解集群组件如何交互,以便进行准确的故障定位与修复。一条一条地排查,并适时回顾配置文件,证书有效性等,通常可以找到问题所在。给出的命令需要根据具体环境的配置进行适当的修改。故障排除往往是一个细致且需求反复验证的过程,但遵循上述策略可以高效定位大部分通信故障的原因。
240 12
|
3月前
|
Kubernetes 网络协议 API
在k8s集群中解决master节点与node通信问题
整个排查和解决流程需要综合应用以上方法,以及根据具体情况调整排查顺序或应用其他技术细节。为保证解决方案的实用性和有效性,还需紧跟Kubernetes社区的最新动态和最佳实践。在实际操作过程中,应记录所采取的步骤和观察到的系统响应,以便在遇到类似问题时能够快速定位和解决。
280 8
|
4月前
|
机器学习/深度学习 Kubernetes 监控
Kubernetes 节点故障自愈方案:结合 Node Problem Detector 与自动化脚本
本文深入探讨了Kubernetes节点故障自愈方案,结合Node Problem Detector(NPD)与自动化脚本,提供技术细节、完整代码示例及实战验证。文章分析了硬件、系统和内核层面的典型故障场景,指出现有监控体系的局限性,并提出基于NPD的实时事件捕获与自动化诊断树的改进方案。通过深度集成NPD、设计自动化修复引擎以及展示内核死锁恢复的实战案例,文章详细说明了自愈流程的实现步骤与性能优势。此外,还提供了生产环境部署指南、高可用架构设计及安全防护措施,并展望了机器学习增强故障预测和混沌工程验证的进阶优化方向。全文约1.2万字,适合希望提升Kubernetes集群稳定性的技术人员阅读。
145 1
|
7月前
|
Kubernetes API 网络安全
当node节点kubectl 命令无法连接到 Kubernetes API 服务器
当Node节点上的 `kubectl`无法连接到Kubernetes API服务器时,可以通过以上步骤逐步排查和解决问题。首先确保网络连接正常,验证 `kubeconfig`文件配置正确,检查API服务器和Node节点的状态,最后排除防火墙或网络策略的干扰,并通过重启服务恢复正常连接。通过这些措施,可以有效解决与Kubernetes API服务器通信的常见问题,从而保障集群的正常运行。
437 17
|
12月前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。
|
12月前
|
JavaScript
HTML DOM 节点
HTML DOM(文档对象模型)将HTML文档视为节点树,其中每个部分都是节点:文档本身是文档节点,HTML元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。节点间存在父子及同胞关系,形成层次结构。
|
12月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
12月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
12月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
306 4
|
12月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)