JavaScript-节点常用属性

亦凉 2022-04-18 05:25 222阅读 0赞

节点是构成DOM树的基本单元，HTML源码中的任何内容最终都会转变成DOM树中的一个节点。

元素转为元素节点；标签中的属性转为属性节点；标签中的文本转为文本节点；就算是注释，也最终会转为注释节点。

以下是几个非常常用的节点属性：

nodeType：节点类型

nodeName：节点名称

nodeValue：节点的值

HTML DOM中常用的三种节点分别是元素节点、属性节点、文本节点。

具体指的内容可参考下图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0OTg3MTM3_size_16_color_FFFFFF_t_70][]

案例：

<!DOCTYPE html>
    <html>
     <head>
      <title>元素节点、属性节点、文本节点的测试</title>
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
    
     <script type="text/javascript">
     
        window.onload = function(){
    
            var btnNode = document.getElementsByTagName("button");
            var fruitNode = document.getElementById("fruit");
    
            //元素节点 ul 为元素节点
            var ulNode = document.getElementsByTagName("ul");
    
            //属性节点  name="水果" 为属性节点
            var attrNode = document.getElementById("fruit").getAttributeNode("name");
            var attr2Node = document.getElementById("fruit").getAttributeNode("width");
            
    
            //文本节点  点我
            var textNode = document.getElementById("btn1").firstChild;  //注意这里获取文本节点的方式
    
    
            btnNode[0].onclick = function(){
                alert(fruitNode.getElementsByTagName("li").length);
                
                //以下右边注释为运行的结果
                //获取元素节点的三要素:nodeType,nodeName,nodeValue
                alert(ulNode[0].nodeType);  //1
                alert(ulNode[0].nodeName);  //UL
                alert(ulNode[0].nodeValue); //null
    
                //获取属性节点的三要素:nodeType,nodeName,nodeValue
                alert(attrNode.nodeType);  //2
                alert(attrNode.nodeName);  //name
                alert(attrNode.nodeValue); //水果
    
                alert(attr2Node.nodeType);  //2
                alert(attr2Node.nodeName);  //width
                alert(attr2Node.nodeValue); //80px;
                
                //获取文本节点的三要素:nodeType,nodeName,nodeValue 
                alert(textNode.nodeType);  //3
                alert(textNode.nodeName);  //#TEXT
                alert(textNode.nodeValue); //点我        
    
            }
        }
     
     </script>
     </head>
    
     <body>
            
            节点分三类:
            1: 元素节点 
            2：属性节点 
            3：文本节点
        <ul id="fruit" name="水果" width="80px;">
    
            <li>苹果</li>
            <li>香蕉</li>
            <li>梨子</li>
            <li>葡萄</li>
    
        </ul>
        <button id="btn1">点我</button>
      
     </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0OTg3MTM3_size_16_color_FFFFFF_t_70]: /images/20220418/5f8ba1be6bd048f79b3bcc6dcea67955.png