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/

相关文章
|
18天前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。
|
18天前
|
JavaScript
HTML DOM 节点
HTML DOM(文档对象模型)将HTML文档视为节点树,其中每个部分都是节点:文档本身是文档节点,HTML元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。节点间存在父子及同胞关系,形成层次结构。
|
28天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
27天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
29天前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
41 4
|
29天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
1月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
26天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
30天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树