使用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 相关文章推荐
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
JavaScript开发人员的10个关键习惯小结
Dec 05 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
如何实现一个webpack模块解析器
Oct 24 Javascript
7个好用的JavaScript技巧分享(译)
May 07 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 Javascript
vue实现拖拽进度条
Mar 01 Vue.js
深入理解 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
基于mysql的论坛(4)
2006/10/09 PHP
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
JS绘制微信小程序画布时钟
2016/12/24 Javascript
JS实现标签滚动切换效果
2017/12/25 Javascript
vue-cli中vue本地实现跨域调试接口
2019/01/16 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
python 正则表达式 概述及常用字符
2009/05/04 Python
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
新媒传信软件测试面试题
2013/02/24 面试题
老公给老婆的道歉信
2014/01/10 职场文书
医药营销个人求职信
2014/04/12 职场文书
SQL Server中锁的用法
2022/05/20 SQL Server
Java界面编程实现界面跳转
2022/06/16 Java/Android
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技