使用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 相关文章推荐
javascript 面向对象编程基础 多态
Aug 21 Javascript
jquery动态添加删除(tr/td)
Feb 09 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 Javascript
微信小程序富文本渲染引擎的详解
Sep 30 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 Javascript
webpack.DefinePlugin与cross-env区别详解
Feb 23 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 防止单引号,双引号在接受页面转义
2008/07/10 PHP
php带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
Opacity.js
2007/01/22 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
使用python实现滑动验证码功能
2019/08/05 Python
韩国江南富人区高端时尚百货商场:Galleria(格乐丽雅)
2018/03/27 全球购物
软件设计的目标是什么
2016/12/04 面试题
工作交流会欢迎词
2014/01/12 职场文书
国培教师自我鉴定
2014/02/12 职场文书
护士个人自我鉴定
2014/03/24 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
争先创优演讲稿
2014/09/15 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
大学生操行评语大全
2014/12/31 职场文书
护士求职简历自我评价
2015/03/10 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js
Redis批量生成数据的实现
2022/06/05 Redis