javascript如何统计页面中标签的数量
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript如何统计页面中标签的数量相关的知识，希望对你有一定的参考价值。
javascript如何统计页面中标签的数量:
本章节介绍一下如何统计页面中标签的数量，当然标签是可以重复的，虽然不常用，不过寄希望能够给大家带来或多或少的帮助。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <script type="text/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; //1代表节点的类型为Element if(node.nodeType==1){ 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; } window.onload=function(){ var bt=document.getElementById("bt"); bt.onclick=function(){ alert(‘标签总数‘+countTotalElement(document)+‘\r\n 全部标签如下:\r\n‘+elementName); } } </script> </head> <body> <a href="javascript:void(0);return false" id="bt">点击测试</a> </body> </html>
以上代码实现了我们的要求，点击按钮可以弹出框，能够统计页面中标签的数量。代码比较简单，就是通过判断节点类型，如果是元素节点就计算在内，并且结合for循环通过递归的方式实现数量统计。
一.代码注释:
1.var elementName="",声明一个变量，用来存储标签的名称，并且通过字符串连接将结果串联起来。
2.function countTotalElement(node){}，此函数是功能的核心，参数是个节点对象，在本代码中是document节点对象。
3.var total=0，声明一个变量并初始化为0，用来存储标签的数量。
4.if(node.nodeType==1)，判断是否是元素节点。
5.total++，加1运算。
6.elementName=elementName+node.tagName+"\r\n"，标签名称连接起来，后面的回车换行。
7.var childrens=node.childNodes，获取node节点的所有一级子节点。
8.for(var i=0;i<childrens.length;i++)，遍历每一个一级子节点。
9.total+=countTotalElement(childrens);，这里运用了递归的方式实现深度遍历，也就是首先判断一个节点，然后再去遍历判断它的子节点，依次类推。
10.return total，返回数量。
二.相关阅读:
1.nodeType属性可以参阅javascript的DOM元素节点操作简单介绍一章节。
2.tagName属性可以参阅javascript如何获取元素的tagName标签名一章节。
3.childNodes属性可以参阅js的childNodes用法简单介绍一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11388
更多内容可以参阅:http://www.softwhy.com/javascript/
以上是关于javascript如何统计页面中标签的数量的主要内容，如果未能解决你的问题，请参考以下文章
Access Labels Report 中标签的数量和位置在打印预览中正确，但在打印或导出中不正确
如何在没有 API 的情况下获取 Instagram 中标签的所有图像？
EMV 标签 91 发行者身份验证数据 - 如何确定响应中标签的格式