使用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 相关文章推荐
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
分页栏的web标准实现
Nov 01 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
Nov 14 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
微信小程序实现收货地址左滑删除
Nov 18 Javascript
js实现计时器秒表功能
Dec 16 Javascript
JS原型对象操作实例分析
Jun 06 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 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面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
菜鸟javascript基础整理1
2010/12/06 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
JavaScript Split()方法
2015/12/18 Javascript
深入理解jQuery之防止冒泡事件
2016/05/24 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
js实现无缝轮播图
2020/03/09 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
python科学计算之narray对象用法
2019/11/25 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
Python sorted对list和dict排序
2020/06/09 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
绿色家庭事迹材料
2014/05/01 职场文书
党委班子剖析材料
2014/08/21 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
2016猴年春节问候语
2015/11/11 职场文书
赞美教师的句子
2019/09/02 职场文书
Vue和Flask通信的实现
2021/05/19 Vue.js
能让Python提速超40倍的神器Cython详解
2021/06/24 Python
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
Python 中的Sympy详细使用
2021/08/07 Python