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

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

　　我们先来捋捋思路，那要从页面上获取标签，不用说我们肯定会想到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. C#连接Access2013

    今天测试连接Access2013数据库,遇到错误,综合几个大神建议,解决了 我的系统是windows 2008 64位的,连接字符串如下: <connectionStrings> < ...

  2. D15——C语言基础学PYTHON

    C语言基础学习PYTHON——基础学习D15 20180926内容纲要: 1.CSS介绍 2.CSS的四种引入方式 3.CSS选择器 4.CSS常用属性 5.小结 6.练习 1 CSS介绍 层叠样式表 ...

  3. 如何在Ubuntu 14.04上利用jexus搭建支持php+mysql数据库的网站服务

      准备部分:sudo apt-get update          sudo apt-get install unzip -y第一部分:安装jexus    在终端运行以下命令    cd /tm ...

  4. jieba分词(3)

    jieba分词中Tokenize的使用,Tokenize主要是用来返回词语在原文的弃之位置,下面贴上代码: #-*- coding:utf-8 -*- from __future__ import u ...

  5. 如何查看第三方apk的信息

    很多时候,我们需要获取别人的apk的信息.但是我们看不到apk的代码,对于apk的信息并没有直接的方法获取.那么,我们要怎么获取apk信息呢? 这里,我整理了两个方法,亲测可用. 第一种,直接使用An ...

  6. JavaScript -- Math

    ----- 016-Math.html ----- <!DOCTYPE html> <html> <head> <meta http-equiv=" ...

  7. 结构体访问成员变量什么时候该用“->”或者是"."呢？的困惑

    煎蛋栗子: typedef struct Node{int data;struct Node *next;}LinkList; LinkList *p=(LinkList *)malloc(sizeo ...

  8. mysql关于timestamp字段相关内容

    发现5.6和5.7版本的创建表不一致,从5.6导出数据表创建sql文件,然后导入到5.7表会报错,timestamp不能为空 查看的sql_mode mysql5.0以上支持的三种模式 1. ANSI ...

  9. JDK7 异常的多重捕获

    Java 7之前的版本: 1 2 3 4 5 6 7 8 9 10 catch (IOException ex) {      logger.error(ex);      throw new MyE ...

  10. linux-程序发布脚本

    写了个启动程序, 调优jvm的脚本 #!/bin/bash MEM=`free -m | grep Mem | awk '{print int($2 * 90 / 100)}'` JAVA_OPTS= ...