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 相关文章推荐
30个最佳jQuery Lightbox效果插件分享
Apr 11 Javascript
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
javascript代码调试之console.log 用法图文详解
Sep 30 Javascript
EasyUI 结合JS导出Excel文件的实现方法
Nov 10 Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 Javascript
详解vue+css3做交互特效的方法
Nov 20 Javascript
Vue+Element实现动态生成新表单并添加验证功能
May 23 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 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
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
js自定义回调函数
2015/12/13 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
node+multer实现图片上传的示例代码
2020/02/18 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
Python读写Json涉及到中文的处理方法
2016/09/12 Python
Python Flask-web表单使用详解
2017/11/18 Python
Python字典数据对象拆分的简单实现方法
2017/12/05 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
Python实现的爬取小说爬虫功能示例
2019/03/30 Python
python3.5安装python3-tk详解
2019/04/26 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
美国保健品专家:Life Extension
2018/05/04 全球购物
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
安全环保标语
2014/06/09 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
学习经验交流会策划书
2015/11/02 职场文书
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技
我家女友可不止可爱呢 公开OP主题曲无字幕动画MV
2022/04/11 日漫