• 【转】JavaScript获取节点类型、节点名称和节点值


    DOM节点信息包括节点类型(nodeType)、节点名称(nodeName)和节点值(nodeValue)。

    节点类型

    DOM节点中,每个节点都拥有不同的类型。

    W3C规范中常用的 DOM节点类型有以下几种:
    节点类型说明
    元素节点 每一个HTML标签都是一个元素节点,如 <div> 、 <p>、<ul>等 1
    属性节点 元素节点(HTML标签)的属性,如 id 、class 、name 等。 2
    文本节点 元素节点或属性节点中的文本内容。 3
    注释节点 表示文档注释,形式为<!-- comment text -->。 8
    文档节点 表示整个文档(DOM 树的根节点,即 document ) 9

    获取节点类型的语法:
        nodeObject.nodeType
    其中,nodeObject 为DOM节点(节点对象)。该属性返回以数字表示的节点类型,例如,元素节点返回 1,属性节点返回 2 。

    例如,获取id="demo"的<div>标签的节点类型:
    1. document.getElementById("demo").nodeType;
    该语句的返回值为 1 。

    举例,获取元素节点和文本节点的类型值:
    1. <div id="demo1">点击这里显示节点类型</div>
    2. <script type="text/javascript">
    3. document.getElementById("demo1").onclick=function(){
    4. var divType=this.nodeType;
    5. var textType=this.firstChild.nodeType;  //  this 指当前发生事件的HTML元素,这里是<div>标签
    6. alert(
    7. "<div>标签的节点类型是:"+divType+" "+
    8. "<div>标签内部文本的节点类型是:"+textType
    9. );
    10. }
    11. </script>


    节点名称

    节点名称就是DOM节点的名字,不同类型的节点对应不同的节点名称。
    节点类型节点名称
    元素节点 HTML标签的名称(大写)
    属性节点 属性的名称
    文本节点 它的值永远是#text
    文档节点 它的值永远是#document

    获取节点名称的语法:
        nodeObject.nodeName
    其中,nodeObject 为DOM节点(节点对象)。

    例如,获取id="demo"的<div>标签的节点名称:
    1. document.getElementById("demo").nodeName;
    该语句的返回值为 DIV 。

    举例,获取元素节点名称、文本节点名称和文档节点名称:
    1. <div id="demo2">点击这里显示节点名称</div>
    2. <script type="text/javascript">
    3. document.getElementById("demo2").onclick=function(){
    4. var divName=this.nodeName;
    5. var textName=this.firstChild.nodeName;  //  this 指当前发生事件的HTML元素,这里是<div>标签
    6. var documentName=document.nodeName
    7. alert(
    8. "<div>标签的节点名称是:"+divName+" "+
    9. "<div>标签内部文本的节点名称是:"+textName+" "+
    10. "文档节点的节点名称是:"+documentName
    11. );
    12. }
    13. </script>


    节点值

    对于文本节点,节点值为文本内容;对于属性节点,节点值为属性的值。

    节点值对于文档节点和元素节点是不可用的。

    获取节点值的语法:
        nodeObject.nodeValue
    其中,nodeObject 为DOM节点(节点对象)。

    举例,获取文本节点的节点值:
    1. <div id="demo3">点击这里显示文本节点的值</div>
    2. <script type="text/javascript">
    3. document.getElementById("demo3").onclick=function(){
    4. alert(this.firstChild.nodeValue);  //  this 指当前发生事件的HTML元素,这里是<div>标签
    5. }
    6. </script>


  • 相关阅读:
    Preparing for Merge Sort(二分)
    Polycarp's phone book(unordered_mpa 大法好)
    Yet Another Task with Queens
    nginx 初时
    JSON.stringfiy 序列化
    css grid布局使用
    遍历对象属性5种方法,排列顺序规则
    归并方法
    处理地图经纬度,保留6位小数
    js 操作方法
  • 原文地址:https://www.cnblogs.com/js-wxf/p/5937492.html
Copyright © 2020-2023  润新知