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

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

　　我们先来捋捋思路，那要从页面上获取标签，不用说我们肯定会想到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. JDK中线程组ThreadGroup

    如果线程有100条...分散的不好管理... 线程同样可以分组ThreadGroup类. 线程组表示一个线程的集合.此外,线程组也可以包含其他线程组.线程组构成一棵树,在树中,除了初始线程组外,每个线 ...

  2. PHP：使用Zend对源码加密、Zend Guard安装以及Zend Guard Run-time support missing的解决方法

    Zend Guard是目前市面上最成熟的PHP源码加密产品了.刚好需要对自己的产品进行加密,折腾了一晚上,终于搞定,将碰到的问题及解决方法记录下来,方便日后需要,也可以帮助其他人.我使用的是Wamps ...

  3. 用SpringSecurity从零搭建pc项目-01

    注:之前写过一些列的SpringSecurity的文章,重新写一遍是为了把某些不必要的步骤省去,留下精简的,因为工作中有一些不需要. 在java的权限框架里,shiro和SpringSecurity是 ...

  4. Android的Fragment的第一种声明方式

    Android的Frangment的第一种声明方式 实际效果图如下: 项目结构图如下: fragment1: package com.demo.fragementfirst; import andro ...

  5. JavaScript -- Window-Name

    -----027-Window-Name.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=& ...

  6. 联系动词Link.V笔记

    这篇单独记录一下联系动词的语法.需要注意的是,只有这个单词在作为联系动词的时候才是这个意思或者才是这样的用法.当然每个单词都会有很多的用法,并不只是这样而已. 第一组:好像…似乎… seem to b ...

  7. Java NIO 基础知识

    前言 前言部分是科普,读者可自行选择是否阅读这部分内容. 为什么我们需要关心 NIO?我想很多业务猿都会有这个疑问. 我在工作的前两年对这个问题也很不解,因为那个时候我认为自己已经非常熟悉 IO 操作 ...

  8. smarty安装与配置

    smarty是一个 PHP 模板引擎,也就是一个类库, 可以到官网下载,也可以到其GitHub地址去下载: 鄙人下载的是 3.1.32版本,解压后的目录结构如下: 最重要的是 libs 目录,demo ...

  9. Ansible工作流程详解

    1:Ansible的使用者 ------>Ansible的使用者来源于多种维度,(1):CMDB(Configuration Management Database,配置管理数据库),CMDB存 ...

  10. Django models 的常用字段类型和字段参数

    <1> CharField #字符串字段, 用于较短的字符串. #CharField 要求必须有一个参数 maxlength, 用于从数据库层和Django校验层限制该字段所允许的最大字符 ...