使用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语法总结和注意事项小结
Nov 11 Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 Javascript
jquery实现右侧栏菜单选择操作
Mar 04 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
微信小程序checkbox组件使用详解
Jan 31 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 Javascript
微信小程序开发摇一摇功能
Nov 22 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
单位速度在实战中的运用
2020/03/04 星际争霸
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
2013/04/15 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
2015/02/18 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
Vue-Access-Control 前端用户权限控制解决方案
2017/12/01 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
详解如何提升JSON.stringify()的性能
2019/06/12 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
浅析python的优势和不足之处
2018/11/20 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
喝酒检查书范文
2014/02/23 职场文书
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
广告业务员岗位职责
2015/02/13 职场文书
如何使用Python实现一个简易的ORM模型
2021/05/12 Python
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫