使用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 相关文章推荐
屏蔽script注入小例子
Nov 12 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
js实现页面a向页面b传参的方法
May 29 Javascript
React学习笔记之高阶组件应用
Jun 02 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 Javascript
vue-router源码之history类的浅析
May 21 Javascript
Taro小程序自定义顶部导航栏功能的实现
Dec 17 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 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
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
jquery 输入框数字限制插件
2009/11/10 Javascript
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
JavaScript自定义文本框光标
2017/03/05 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
2017/10/11 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
Python程序设计入门(3)数组的使用
2014/06/16 Python
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
Python 12306抢火车票脚本
2018/02/07 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
python实现简单学生信息管理系统
2020/04/09 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
python ssh 执行shell命令的示例
2020/09/29 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
财务助理岗位职责
2013/11/10 职场文书
119消防日活动总结
2014/08/29 职场文书
2014年教研室工作总结
2014/12/06 职场文书
离婚协议书范文2015
2015/01/26 职场文书
初中数学教学随笔
2015/08/15 职场文书
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏