js获取html页面节点方法(递归方式)


Posted in Javascript onDecember 13, 2013

很久没有操作过递归调用了。看完之后,蓦然惊醒啊!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>统计Element节点</title>
   <script language="javascript">
         var  elementName="";
   function countTotalElement(node)
   {
       ///Attribute  nodeType值为2,表示节点属性
    ///Comment    nodeType值为8,表示注释文本
    ///Document   nodeType值为9,表示Document
    ///DocumentFragment   nodeType值为11,表示Document片段
    ///Element            nodeType值为1,表示元素节点
    ///Text               nodeType值为3,表示文本节点
       var total=0;
    if(node.nodeType==1) //1代表节点的类型为Element
    {
       total++;
    elementName=elementName+node.tagName+"\r\n";    }
    var childrens=node.childNodes;
    for(var i=0;i<childrens.length;i++)
    {
        total+=countTotalElement(childrens[i]);
    } 
    return total;
   }
   </script>
</head>

<body>
     <h1>测试</h1>
     <table width="100" border="2" cellpadding="0" cellspacing="0">
         <tr><td>
         <form name="form1" action="" method="post">
               <input type="text" name="ipput1" value="测试"><br />
               <input type="password" name="password" value="">
         </form>
         </td></tr>
     </table>
     <a href="javascript:void(0)" onClick="alert('标记总数'+countTotalElement(document)+'\r\n 全部标记如下:\r\n'+elementName);">开始测试</a>
</body>
</html>

其实,通过递归调用也可以实现 想百度蜘蛛爬虫一样的效果!这个值得一试,或许可以通过这个方法,写一个sitemap生成器!

Javascript 相关文章推荐
javascript网页关键字高亮代码
Jul 30 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
js实现楼层效果的简单实例
Jul 15 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
vue动态绑定class选中当前列表变色的方法示例
Dec 19 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 Javascript
详解JavaScript之ES5的继承
Jul 08 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 Javascript
jquery 合并内容相同的单元格(示例代码)
Dec 13 #Javascript
javascript读取xml实现javascript分页
Dec 13 #Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 #Javascript
javascript分页代码实例分享(js分页)
Dec 13 #Javascript
jquery 操作iframe的几种方法总结
Dec 13 #Javascript
异步动态加载JS并运行(示例代码)
Dec 13 #Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 #Javascript
You might like
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
php如何获取文件的扩展名
2015/10/28 PHP
对PHP依赖注入的理解实例分析
2016/10/09 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
JavaScript 变量命名规则
2009/09/23 Javascript
javascript插入样式实现代码
2012/02/22 Javascript
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
JavaScript中的lastIndexOf()方法使用详解
2015/06/06 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
react以create-react-app为基础创建项目
2018/03/14 Javascript
Js中使用正则表达式验证输入是否有特殊字符
2018/09/07 Javascript
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
Python tkinter常用操作代码实例
2020/01/03 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
Python 字典一个键对应多个值的方法
2020/09/29 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
四年的个人工作自我评价
2013/12/10 职场文书
企业项目策划书
2014/01/11 职场文书
百日宴上的祝酒词
2015/08/10 职场文书
Golang bufio详细讲解
2022/04/21 Golang
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python