使用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 相关文章推荐
关于viewport,Ext.panel和Ext.form.panel的关系
May 07 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
页面加载完后自动执行一个方法的js代码
Sep 06 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
基于vue-router 多级路由redirect 重定向的问题
Sep 03 Javascript
详解vue中this.$emit()的返回值是什么
Apr 07 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
为react组件库添加typescript类型提示的方法
Jun 15 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/04/09 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
php验证码实现代码(3种)
2015/09/07 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
js日期时间补零的小例子
2013/03/05 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
详解Webpack loader 之 file-loader
2018/11/07 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
Python实现模拟时钟代码推荐
2015/11/08 Python
python实现kNN算法
2017/12/20 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
PyCharm上安装Package的实现(以pandas为例)
2020/09/18 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
硕士研究生自我鉴定范文
2013/12/27 职场文书
学生操行评语大全
2014/04/24 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
旷课检讨书范文
2014/10/30 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
实习单位意见
2015/06/04 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
nginx服务器的下载安装与使用详解
2021/08/02 Servers