HTMLDOM中三种元素节点、属性节点、文本节点的测试案例

最新推荐文章于 2022-08-04 14:00:30 发布

转载最新推荐文章于 2022-08-04 14:00:30 发布 · 299 阅读

文章标签：

#测试 #javascript #ViewUI

本文详细介绍了 HTML DOM 中的三种基本节点类型：元素节点、属性节点和文本节点，并通过示例展示了如何使用 JavaScript 来操作这些节点。

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

具体指的内容可参考下图：

以下为测试用例:

<!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>