使用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 动态设置已知select的option的value值的代码
Dec 16 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
location.href用法总结(最主要的)
Dec 27 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 Javascript
js中this用法实例详解
May 05 Javascript
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
Mar 06 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 Javascript
Node.js API详解之 readline模块用法详解
May 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操作excel文件 基于phpexcel
2010/07/02 PHP
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
Mootools 1.2教程 事件处理
2009/09/15 Javascript
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
caller和callee的区别介绍及演示结果
2013/03/10 Javascript
jQuery中读取json文件示例代码
2013/05/10 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
前端性能优化及技巧
2016/05/06 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
Javascript实现图片不间断滚动的代码
2016/06/22 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
JS文件中加载jquery.js的实例代码
2018/05/05 jQuery
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
Django中使用group_by的方法
2015/05/26 Python
Python之读取TXT文件的方法小结
2018/04/27 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
佳能德国网上商店:Canon德国
2017/03/18 全球购物
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
求职信如何撰写?
2019/05/22 职场文书
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL