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

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

　　我们先来捋捋思路，那要从页面上获取标签，不用说我们肯定会想到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. @transactional注解,报错后数据库操作回滚失败

    1. https://jingyan.baidu.com/article/3a2f7c2e27d51b26afd611ff.html 2. https://blog.csdn.net/lee_star ...

  2. C#实现程序的版本升级更新

    我们做了程序,不免会有版本升级,这就需要程序有自动版本升级的功能.那么看看我是如何实现程序自动更新的. 直接上代码: using System; using System.Collections.Ge ...

  3. 性能优化中CPU、内存、磁盘IO、网络性能的依赖(转)

    关于系统性能优化,推荐一篇不错的博客! 系统优化是一项复杂.繁琐.长期的工作,优化前需要监测.采集.测试.评估,优化后也需要测试.采集.评估.监测,而且是一个长期和持续的过程,不 是说现在优化了,测试 ...

  4. (转) JVM Crash with SIGSEGV - problematic frame - libzip.so

    原文:https://stackoverflow.com/questions/38057362/jvm-crash-with-sigsegv-problematic-frame-libzip-so h ...

  5. NodeJS开发环境配置

    "Node.js 是服务器端的 JavaScript 运行环境,它具有无阻塞(non-blocking)和事件驱动(event-driven)等的 特色,Node.js 采用 V8 引擎,同 ...

  6. vue.js过渡效果之--javascript钩子

    写在前面 姊妹篇  vue.js之过渡效果-css.今天一篇博文阅读量破300,心里还是有点小激动的.没错,我就是这么容易满足(害羞).这个数据可能连大牛一篇文章阅读量的零头都没有,但这却是我个人的一 ...

  7. GO入门——4. 数组、切片与map

    1. 数组 定义数组的格式:var [n],n>=0 数组长度也是类型的一部分,因此具有不同长度的数组为不同类型 注意区分指向数组的指针和指针数组 //数组的指针 a := [2]int{1, ...

  8. 对html中iframe的研究

    虽然平时不怎么用iframe,但经常在网上听一些前辈说iframe怎样怎样,今天索性对iframe来个大研究,那样就不必去记那些条条框框了,自己体验一遍比看什么都好. 创建两个文件一个index.ht ...

  9. Java设计模式之工厂方法模式（转） 实现是抽象工厂？

    Java设计模式之工厂方法模式 责任编辑:覃里作者:Java研究组织   2009-02-25   来源:IT168网站   文本Tag: 设计模式 Java [IT168 技术文章]         ...

  10. 面试：C++输入数据

    最近在做笔试题,相比与leetcode,笔试题都是要自己写输入输出的,每次在这里都浪费了不少时间,这篇文章总结了一下在C++中怎么向数组中输入数据. 1. 先输入数组大小,然后输入数据数据,中间以空格 ...