最近忙的一匹，忙着大保健，都来不及写博客，今天特意抽出点时间来写一写

　　前两天看到一个题，是问如何从页面上获取所有的标签的并查看他们的数量，感觉还是有点意思的，所以给大家来搞一下子

　　我们先来捋捋思路，那要从页面上获取标签，不用说我们肯定会想到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获取页面上的所有标签的更多相关文章

  1. 如何用 js 获取table 或者其他块状标签的 宽和高

    这个比较简单,总体思想,标签标记一个id,js获取id,就能用它的属性了.介绍两种方法.请看下面代码. 第一种 <script> function width_table_all() { ...

  2. JS获取页面上所有input

    for (var i = 0; i < document.getElementsByTagName("input").length; i++) { if (document. ...

  3. 用JavaScript获取页面上被选中的文字的技巧

    这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法.最关键的JavaScript API是: event.selection = window.getSelection(); ...

  4. JS基础入门篇（ 三 ）—使用JS获取页面中某个元素的4种方法以及之间的差别（ 一 ）

    1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...

  5. jquery、js获取页面高度宽度等

    jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); ...

  6. JS获取页面数据执行Ajax请求

    下面这个例子展示了如何使用js获取页面中元素的值,并且将这些值作为参数执行Ajax请求. $("#submit-task").bind("click", fun ...

  7. 使用js在页面上新建文件夹

    使用js在页面上新建文件夹 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  8. Progress.js – 为页面上的任意对象创建进度条效果

    Progress.js 是一个 JavaScript 和 CSS3 的库,它帮助开发人员为网页上的每个对象创建和管理进度条效果.你可以设计自己的模板,进度条或者干脆定制. 您可以使用 Progress ...

  9. JS获取页面元素并修改

    //实现代码如下,非常简单<script> (function(){ var ele = document.getElementsByTagName("ul"); // ...

随机推荐

  1. 【sping揭秘】13、Spring AOP一世&二世

    Spring AOP一世 Spring AOP中的advice Before advice 这个就是在方法执行之前执行,也就是在对应的joinpoint之前 spring AOP二世 开启aspect ...

  2. odoo开发笔记 -- 异常、错误、警告、提示、确认信息显示

    1.检查业务逻辑中的错误,终止代码执行,显示错误或警告信息: raise osv.except_osv(_('Error!'), _('Error Message.')) 示例代码: #删除当前销售单 ...

  3. android开发学习——day1

    了解安卓系统架构:Linux内核层,系统运行层库,应用框架层,应用层 版本信息 android开发的特色之处就在于强大的组件功能 开发环境android stdio 2.0安装:把安装的组件都勾选上, ...

  4. 计划任务crond服务

    什么是计划任务:后台运行,到了预定的时间就会自动执行的任务,前提是:事先手动将计划任务设定好.这就用到了crond服务 crond服务相关的软件包[root@MiWiFi-R3-srv ~]# rpm ...

  5. Selenium自动化测试Python二：WebDriver基础

    WebDriver基础 欢迎阅读WebDriver基础讲义.本篇讲义将会重点介绍Selenium WebDriver的环境搭建和基本使用方法. WebDriver环境搭建 Selenium WebDr ...

  6. Intellij IDEA Spring Boot 项目Debug模式启动缓慢问题

    问题 Intellij IDEA Spring Boot 项目Debug模式启动缓慢 环境 os: windows10 idea :2018.1 解决方法 去除所有断点就正常了,很诡异,原因未知.

  7. CORS实践

    $.ajax("http://yafbox.18touch.com/", { type: "POST", data: {id:id,v:v}, //header ...

  8. Spring报错:Exception in thread "main" java.lang.IllegalArgumentException at org.springframework.asm.ClassReader.<init>(Unknown Source)

    简单搭建了一个Spring Maven工程就报错: 看到网上说是JDK 7 和 Spring3.x :JDK编译级别设置成1.7,仍然没有得到解决,采用版本为  3.2.0.RELEASE <b ...

  9. No caching ——无缓存工具

    No caching ——无缓存工具 无缓存工具阻止客户端应用程序(如Web浏览器)缓存任何资源,因此,请求总是发送到远程站点,所以我们总能看到最新版本. 适用场景 开发每次新部署了一版环境,说解决了 ...

  10. FFmpeg简易播放器的实现-音视频播放

    本文为作者原创,转载请注明出处:https://www.cnblogs.com/leisure_chn/p/10235926.html 基于FFmpeg和SDL实现的简易视频播放器,主要分为读取视频文 ...