js获取html页面节点方法(递归方式)
很久没有操作过递归调用了。看完之后，蓦然惊醒啊！
<!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递归实现反转数组字符串的实例
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-递归实现反转数组字符串</title> <script> var func = function(x,indx,str){ return
-
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
废话不多说了,直奔主题,你,具体代码如下所示: <script> //----------------for用来遍历数组对象-- var i,myArr = [1,2,3]; for (var i = 0; i < myArr.length; i++) { console.log(i+":"+myArr[i]); }; //---------for-in 用来遍历非数组对象 var man ={hands:2,legs:2,heads:1}; //为所有的对象添加cl
-
JavaScript采用递归算法计算阶乘实例
本文实例讲述了JavaScript采用递归算法计算阶乘的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript中的递归算法计算阶乘,初学编程时候,这是很常见的小例子,比较一下,JS中的计算方法与其有何异同. 运行效果如下: 具体代码如下: <html> <head> <meta http-equiv="content-type" content="text/html; charset=GB2312" /> <t
-
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
函数表达式 1.JavaScript中定义函数有2钟方法: 1-1.函数声明: 复制代码 代码如下: function funcName(arg1,arg2,arg3){ //函数体} ①name属性:可读取函数名.非标准,浏览器支持:FF.Chrome.safari.Opera. ②函数声明提升:指执行代码之前会先读取函数声明.即函数调用可置于函数声明之前. 1-2.函数表达式: 复制代码 代码如下: var funcName = function(arg1,arg2,arg3){ //函
-
Vue.js 递归组件实现树形菜单（实例分享）
最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = true import main from './components/main.vue' new Vue({ el: '#app', render: h => h(main) }) 它引入了一个组件 main.vue: <template> <div class="tree-m
-
vue.js学习之递归组件
递归组件 组件在它的模板内可以递归地调用自己,只有当它有 name 选项时才可以. 在官网这句话就是关键定义组件是一定要有name属性.按照这个思路我们开动吧. 实现最终效果图: 模拟数据格式如下: var data = [{ "id": "1", "data": { "menuName": "项目管理", "menuCode": "", }, "child
-
JS中递归函数
编程语言中,函数Func(Type a,--)直接或间接调用函数本身,则该函数称为递归函数.递归函数不能定义为内联函数. 递归函数: function factorical(num){ if(num<=1){ return 1; } else{ return num*factorical(num-1); } } factorial(2)//2 这个递归函数就是用函数来调用函数本身,但是这样真的好吗,好 接下来看这里 var another=factorical; factorical=null;
-
js中递归函数的使用介绍
下面我们就做一个10以内的阶乘试试看吧: js中递归函数的使用 function f(num){ if(num alert("10!的结果为:"+f(10)); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 递归函数的调用就说这么多了 js递归函数调用自身时的保险方式. 来自js高级程序设计 一个典型阶乘递归函数: 复制代码 代码如下: function fact(num){ if (num<=1){ return 1; }else{ return num*fact
-
javascript中递归的两种写法
话不多说,请看代码 function addd(n){ if(n==1){ return 1; } return n*addd(n-1); } function add(n){ var num=1; for(var i=1;i<n;i++){ num=num*i; } return num; } 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!
-
JavaScript的递归之递归与循环示例介绍
递归与循环 对于不同类型的需要重复计算的问题,循环和递归两种方法各有所长,能给出更直观简单的方案.另一方面,循环和递归的方法可以互相转换.任何一个循环的代码都可以用递归改写,实现相同的功能:反之亦然.在不失去其普遍性的前提下,可以把循环和递归分别用下列伪代码概括. 伪代码格式说明:循环采用while形式:变量不加定义:赋值用:=:条件表达式和执行的语句都写成函数的形式,圆括号内写上相关的值.其他语法方面,尽量接近Javascript的规范. 复制代码 代码如下: //pseudo code of