使用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 相关文章推荐
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
javascript动画浅析
Aug 30 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
JQuery 又谈ajax局部刷新
Nov 27 jQuery
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 Javascript
Vue实现开关按钮拖拽效果
Sep 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
PHP 开发工具
2006/12/06 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
PHP实现爬虫爬取图片代码实例
2021/03/03 PHP
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
jQuery对表单的操作代码集合
2011/04/06 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
Vue.js 父子组件通讯开发实例
2016/09/06 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
2019/07/19 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
安装dbus-python的简要教程
2015/05/05 Python
浅析python的Lambda表达式
2019/02/27 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
不用游标的SQL语句有哪些
2012/09/07 面试题
土木工程实习生自我鉴定
2013/09/19 职场文书
《四季》教学反思
2014/04/08 职场文书
公司口号大全
2014/06/11 职场文书
团代会邀请函
2015/02/02 职场文书
主持人大赛开场白
2015/05/29 职场文书
党支部对转正的意见
2015/06/02 职场文书
高一英语教学反思
2016/03/03 职场文书