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

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

　　我们先来捋捋思路，那要从页面上获取标签，不用说我们肯定会想到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. abp 使用 hangfire结合mysql

    abp 官方使用的hangfire 默认使用的是sqlserver的存储 需要引入支持mysql的类库 我这边使用的是Hangfire.MySql.Core 直接用nuget安装即可 首先按照官方文档 ...

  2. 域名直接访问应用程序-不加端口号&不加路径名

    当访问域名的时候,端口默认指定的是80: 而80端口在Linux系统下,1024之前的端口是只有root用户才能使用的, 因此将,系统层面将端口80 映射到8080, iptables -t nat ...

  3. web3调用call()方法获取不到返回值

    一.web3的call()获取不到返回值问题和解决方法 在彩票小合约中,遇到一个问题:合约中 有两个方法 第一个返回一个账户地址,没有使用到当前方法调用者信息: 第二个使用到了当前方法调用者信息 在w ...

  4. python for dblp.xml

    由于最近处理数据时涉及到dblp.xml,刚开始下载时dblp.xml只有300多M,但解压之后就有1.9G,没有什么东西能够打开,所以必须要用工具来处理,在python中sax包能够一边解析一边处理 ...

  5. Android中Serializable和Parcelable序列化对象详解

    学习内容: 1.序列化的目的 2.Android中序列化的两种方式 3.Parcelable与Serializable的性能比较 4.Android中如何使用Parcelable进行序列化操作 5.P ...

  6. 关于Spring Security中无Session和无状态stateless

    Spring Security是J2EE领域使用最广泛的权限框架,支持HTTP BASIC, DIGEST, X509, LDAP, FORM-AUTHENTICATION, OPENID, CAS, ...

  7. 全网最详细的Windows系统里Oracle 11g R2 Database服务器端（64bit）的下载与安装（图文详解）

    不多说,直接上干货! 环境: windows10系统(64位) 最好先安装jre或jdk(此软件用来打开oracle自带的可视化操作界面,不装也没关系:可以安装plsql,或者直接用命令行操作) Or ...

  8. 《垃圾回收的算法与实现》——Python垃圾回收

    Python垃圾回收 python采用引用计数法进行垃圾回收 Python内存分配 python在分配内存空间时,在malloc之上堆放了3个独立的分层. python内存分配时主要由arena.po ...

  9. Mysql 锁机制和事务

    InnoDB 锁机制 InnoDB存储引擎支持行级锁 其大类可以细分为共享锁和排它锁两类 共享锁(S):允许拥有共享锁的事务读取该行数据.当一个事务拥有一行的共享锁时,另外的事务可以在同一行数据也获得 ...

  10. linux buff/cache释放

    手动释放cache # > /proc/sys/vm/drop_caches