使用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 相关文章推荐
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
Jul 26 Javascript
js对table的td进行相同内容合并示例详解
Dec 27 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 Javascript
原生JS实现响应式瀑布流布局
Apr 02 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 Javascript
js控制台输出的方法(详解)
Nov 26 Javascript
js实现京东轮播图效果
Jun 30 Javascript
Django使用多数据库的方法
Sep 06 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 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
基于文本的搜索
2006/10/09 PHP
PHP 变量定义和变量替换的方法
2009/07/30 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
基于Jquery的温度计动画效果
2010/06/18 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
js URL参数的拼接方法比较
2012/02/15 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
JavaScrip调试技巧之断点调试
2015/10/22 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
python实现机器学习之多元线性回归
2018/09/06 Python
django query模块
2019/04/20 Python
Python发展简史 Python来历
2019/05/14 Python
Django中提示消息messages的设置方式
2019/11/15 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
selenium如何定位span元素的实现
2021/01/13 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
网络信息安全承诺书
2014/03/26 职场文书
教师党员一句话承诺
2014/03/28 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
小学优秀班主任材料
2014/12/17 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
好员工观后感
2015/06/17 职场文书