遍历整个HTML文档源码：

最新推荐文章于 2021-06-24 19:22:26 发布

向日葵的眼里只有太阳

最新推荐文章于 2021-06-24 19:22:26 发布

阅读量1.1k

点赞数

分类专栏： DOM 文章标签： html 文档 function div input

本文链接：https://blog.csdn.net/smallsundoudou/article/details/7288299

版权

DOM 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

DOM遍历整个HTML文档源码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>example01.html</title>

  </head> 

  <body>

        <div align="center">

           <div id="head">

               用户名：

               <input type="text" name="uname" id="uname"/>

           </div>

        </div>

  </body>

</html>

 

<script type="text/javascript">

<!--

    //当窗体加载完毕后触发匿名函数

    window.onload = function(){

       //document 文档节点

       //获取从哪里开始的节点 ----称为根节点

       var rootNode = document.documentElement;

       //遍历此文档

       //var node = rootNode;

       iteratorNodes(rootNode);

       //打印出结果

       document.write(msg);

    }

    function iteratorNodes(node){

           //判断是否是元素节点 ---属性 ---子节点

       if(node.nodeType==1){

           //打印此节点

           display(node);

           //元素节点的属性节点

           for(var i=0;i<node.attributes.length;i++){

              //获取属性节点

              var attr = node.attributes[i];

              //判断此属性是否存在

              if(attr.specified){

                  //打印出属性节点

                  display(attr);

              }

              //打印出属性节点

              display(attr);

           }

           //元素节点的子节点

           //判断此属性是否有孩子节点

           if(node.hasChildNodes()){

              //获取所有的子节点

              var sonNodes = node.childNodes;

              //遍历所有的孩子节点

              for(var j=0;j<sonNodes.length;j++){

              //获取子节点

                  var sonNode = sonNodes[j];

                  //递归

                  iteratorNodes(sonNode);

              }

           }

           }else{

              //打印此节点

              display(node);

       }

    }

    var msg="";

    function display(node){

       msg+="<br/>节点的名称："+node.nodeName+"节点的value值："+node.nodeValue+"节点的类型值："+node.nodeType;

    }

//-->

</script>