使用JS获取页面上的所有标签


Posted in Javascript onOctober 18, 2018

最近忙的一匹,忙着大保健,都来不及写博客,今天特意抽出点时间来写一写

前两天看到一个题,是问如何从页面上获取所有的标签的并查看他们的数量,感觉还是有点意思的,所以给大家来搞一下子

我们先来捋捋思路,那要从页面上获取标签,不用说我们肯定会想到DOM操作,那获取到了之后呢,我们又不确定某个元素有没有子元素,那怎么办呢,这个时候我们肯定会想到递归啊

那现在我们有了DOM操作和递归就好办了,就可以直接写代码了,下面是代码,写了注释,大家可以拉下去参考一下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <ul></ul>
</body>
</html>
<script>
 var map = {};
 //采用递归调用的方法,比较方便和简单。
 function fds(node) {
  if (node.nodeType === 1) {
   //这里我们用nodeName属性,直接获取节点的节点名称
   var tagName = node.nodeName;
   //判断对象中存在不存在同类的节点,若存在则添加,不存在则添加并赋值为1
   map[tagName] = map[tagName] ? map[tagName] + 1 : 1;
  }
   //获取该元素节点的所有子节点
  var children = node.childNodes;
  for (var i = 0; i < children.length; i++) {
   //递归调用
   fds(children[i])
  }
 }
 fds(document);
 console.log(map)
</script>

总结

以上所述是小编给大家介绍的使用JS获取页面上的所有标签,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript十个最常用的自定义函数(中文版)
Sep 07 Javascript
JavaScript中的类继承
Nov 25 Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
深入对Vue.js $watch方法的理解
Mar 20 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
Less 安装及基本用法
May 05 Javascript
vue-router源码之history类的浅析
May 21 Javascript
js实现弹窗效果
Aug 09 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 Javascript
深入理解 Koa 框架中间件原理
Oct 18 #Javascript
JS实现十分钟倒计时代码实例
Oct 18 #Javascript
基于Vue实现可以拖拽的树形表格实例详解
Oct 18 #Javascript
JavaScript的词法结构精华篇
Oct 17 #Javascript
Javascript中parseInt的正确使用方式
Oct 17 #Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 #Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 #Javascript
You might like
PHP删除HTMl标签的实现代码
2013/06/30 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
php实现Linux服务器木马排查及加固功能
2014/12/29 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
js 自制滚动条的小例子
2013/03/16 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
详解python基础之while循环及if判断
2017/08/24 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
教师业务培训方案
2014/05/01 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
城南旧事观后感
2015/06/11 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers