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/

相关文章
|
22小时前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了如何遍历XML文档的节点树。通过示例代码展示如何使用DOM解析XML,遍历根元素的所有子节点,打印出节点名称和文本值。实例中,XML包含书籍信息,程序遍历显示了标题、作者和年份。
|
22小时前
|
XML JavaScript 前端开发
XML DOM - 属性和方法
**XML DOM 提供编程接口,将XML转换为节点对象,便于通过JS等语言操作。属性如 nodeName、nodeValue、parentNode、childNodes 和 attributes 描述节点详情。方法用于执行操作,如删除节点。**
|
22小时前
|
XML 存储 JavaScript
XML DOM - 访问节点
`getElementsByTagName()` 方法用于获取 XML 文档中指定标签名的所有节点,返回一个节点列表。可以通过循环遍历这个列表,或者利用节点间的父子、兄弟关系在节点树中导航,从而访问每个节点。示例代码加载 &quot;books.xml&quot; 到 xmlDoc,将所有 &quot;book&quot; 节点存入变量 x。
|
2天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了如何遍历XML文档的节点树。通过循环移动,可以访问并处理每个节点,例如提取元素值。示例代码展示了一个实例,它加载XML字符串到`xmlDoc`,遍历根元素的所有子节点,打印出节点名及文本值。
|
2天前
|
JavaScript
DOM 属性列表(命名节点图 Named Node Map)
`DOM`的`Named Node Map`代表元素的属性列表,它是一个自动更新的节点集合。当属性增删时,列表随之变化。以下代码示例加载&quot;books.xml&quot;,获取第一个`&lt;book&gt;`元素的属性节点列表,`x.length`表示属性数量,`x.getNamedItem(&quot;category&quot;).nodeValue`显示&quot;category&quot;属性值,如&quot;cooking&quot;,并输出属性总数1。
|
3天前
|
XML JavaScript 数据格式
DOM 节点列表长度(Node List Length)
`length`属性用于获取DOM节点列表的长度。在示例中,`xmlDoc.getElementsByTagName(&quot;title&quot;)`返回一个节点列表,通过`for`循环遍历这个列表,访问每个`title`节点的子节点值,并用`document.write`显示。代码从&quot;books.xml&quot;加载XML文档并输出所有标题节点的内容。
|
4天前
|
JavaScript
DOM 属性列表(命名节点图 Named Node Map)
`DOM`中的`Named Node Map`表示元素的属性列表,它是一个自动更新的节点集合。当属性增删时,列表随之变化。例如,加载&quot;books.xml&quot;到`xmlDoc`,然后获取第一个`&lt;book&gt;`元素的属性列表:`x=xmlDoc.getElementsByTagName(&#39;book&#39;)[0].attributes`。`x.length`显示属性数量,`x.getNamedItem(&quot;category&quot;).nodeValue`返回&quot;category&quot;属性的值。
|
17天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
8天前
|
XML JavaScript 前端开发
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
9 2
|
9天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
16 1