使用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 嵌套的函数(作用域链)
Mar 15 Javascript
JS获得URL超链接的参数值实例代码
Jun 21 Javascript
node.js中的http.request.end方法使用说明
Dec 10 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
Sep 06 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
Angular封装搜索框组件操作示例
Apr 25 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 Javascript
微信小程序实现简单购物车功能
Dec 30 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
escape unescape的php下的实现方法
2007/04/27 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
php之readdir函数用法实例
2014/11/13 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
python 随机数使用方法,推导以及字符串,双色球小程序实例
2017/09/12 Python
微信跳一跳游戏python脚本
2020/04/01 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
.NET remoting中对象激活的两种方式
2015/06/08 面试题
幼儿园长自我鉴定
2013/10/17 职场文书
村委会贫困证明
2014/01/14 职场文书
大班幼儿评语大全
2014/04/30 职场文书
安全技术说明书
2014/05/09 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
学生会部长竞选稿
2015/11/19 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书