使用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实现商品拖动选择效果代码(自写)
May 28 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
C++中的string类的用法小结
Aug 07 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
VUE中v-model和v-for指令详解
Jun 23 Javascript
express 项目分层实践详解
Dec 10 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
微信小程序实现二维码签到考勤系统
Jan 16 Javascript
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
Apr 13 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弹出对话框实现重定向代码
2014/01/23 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
教你安装python Django(图文)
2013/11/04 Python
python实现井字棋游戏
2020/03/30 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
Python截图并保存的具体实例
2021/01/14 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
C#笔试题集合
2013/06/21 面试题
社区党员先进事迹
2014/01/22 职场文书
思想品德课教学反思
2016/02/24 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python
python中pycryto实现数据加密
2022/04/29 Python
使用JS前端技术实现静态图片局部流动效果
2022/08/05 Javascript
使用CSS实现音波加载效果
2023/05/07 HTML / CSS