使用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 相关文章推荐
jQuery 自动增长的文本输入框实现代码
Apr 02 Javascript
基于jquery &amp; json的省市区联动代码
Jun 26 Javascript
js仿百度切换皮肤功能(html+css)
Jul 10 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
mpvue跳转页面及注意事项
Aug 03 Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 Javascript
微信小程序实现文件、图片上传功能
Aug 18 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
深入理解javascript中的this
Feb 08 Javascript
JS的深浅复制详细
Oct 16 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
全国FM电台频率大全 - 12 安徽省
2020/03/11 无线电
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
python模拟Django框架实例
2016/05/17 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
Python判断一个list中是否包含另一个list全部元素的方法分析
2018/12/24 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
波兰办公用品和学校用品在线商店:Dlabiura24.pl
2020/11/18 全球购物
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
同学聚会老师邀请函
2014/01/28 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
暂住证明怎么写
2015/06/19 职场文书
餐厅服务员管理制度
2015/08/05 职场文书
少儿励志名言(80句)
2019/08/14 职场文书