使用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 CSS修改学习第一章 查找位置
Feb 19 Javascript
javascript自执行函数之伪命名空间封装法
Dec 25 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
瀑布流布局并自动加载实现代码
Mar 12 Javascript
谈谈JavaScript中的函数与闭包
Apr 14 Javascript
js/jquery获取文本框输入焦点的方法
Mar 04 Javascript
javascript数组详解
Oct 22 Javascript
js数组的操作指南
Dec 28 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 Javascript
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
深入理解 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
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
浅谈Node Inspector 代理实现
2017/10/19 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
node.js中axios使用心得总结
2017/11/29 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
Python的函数嵌套的使用方法
2014/01/24 Python
Python下使用Psyco模块优化运行速度
2015/04/05 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
python计算列表内各元素的个数实例
2018/06/29 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
python中partial()基础用法说明
2018/12/30 Python
Python2与Python3的区别实例分析
2019/04/11 Python
CSS3 实现雷达扫描图的示例代码
2020/09/21 HTML / CSS
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
粉红色的鲸鱼:Vineyard Vines
2018/02/17 全球购物
科研先进个人典型材料
2014/01/31 职场文书
文明礼貌演讲稿
2014/05/12 职场文书
团队精神的演讲稿
2014/05/14 职场文书
公务员培的训心得体会
2014/09/01 职场文书
信用卡工作证明模板
2014/09/14 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
乒乓球比赛通知
2015/04/27 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
党支部审查意见
2015/06/02 职场文书
经典祝酒词大全
2015/08/12 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python