<body>
  <div class="box clearfix"></div>
  <div name="zs"></div>
  <div class="box"></div>
  <div name="ls"></div>
  <div class="attr"></div>
  <div class="box2"></div>
  <div class="box A"></div>
</body>
 
--------------------------------------------------------------------------------------------------------------------------------------
 
function $attr(property, value) {
  // 获取当前页面中所有的标签
  let elements = document.getElementsByTagName('*'),
    arr = [];
  elements = Array.from(elements); // => 把非数组转换为数组
  elements.forEach(item => {
    // => 储存的是当前元素 property 对应的属性值
    let itemValue = item.getAttribute(property);
    if (property === 'class') {
      // => 样式类属性名要特殊处理
      new RegExp("\\b" + value + "\\b").test(itemValue) ? arr.push(item) : null;
      return;
    }
    if (itemValue === value) {
      // => 获取的值和传递的值校验成功
      arr.push(item);
    }
  });
return arr;
}
console.log($attr('class', 'box'));

实现一个 $attr(name,value) 遍历;属性为 name 值为 value 的元素集合的更多相关文章

  1. 关于js中的for(var in)遍历属性报错问题

    之前遇到过这个问题,但是没找到问题的所在,将for(var i in  array){} 改成了for(var i ;i<array.length;i++)循环,但是今天又遇到了,mark一下错 ...

  2. C# 遍历类的属性并取出值

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精    今天有点胡思乱想,想遍历MVC Model的属性并 ...

  3. js中attr 与find 获取属性值,

    一.attr的用法 1. attr(属性名)        //获取属性的值(取得第一个匹配元素的属性值.通过这个方法可以方便地从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回 und ...

  4. jQuery RemoveAttr(checked)之后再Attr(checked)属性无效果的原因分析

    jQuery中attr()和prop()在修改checked属性时的区别 投稿:whsnow 字体:[增加 减小] 类型:转载   使用语句$.attr('checked',true),将复选框的属性 ...

  5. [转] JavaScript中的属性:如何遍历属性

    在JavaScript中,遍历一个对象的属性往往没有在其他语言中遍历一个哈希(有些语言称为字典)的键那么简单.这主要有两个方面的原因:一个是,JavaScript中的对象通常都处在某个原型链中,它会从 ...

  6. JS遍历属性和方法

    引用原文:http://www.cnblogs.com/lishenglyx/archive/2008/12/08/1350573.html#undefined <script language ...

  7. 【转载】JavaScript中的属性:如何遍历属性

    转载自:http://www.cnblogs.com/ziyunfei/archive/2012/11/03/2752905.html 在JavaScript中,遍历一个对象的属性往往没有在其他语言中 ...

  8. js遍历对象所有的属性名称和值

    /* * 用来遍历指定对象所有的属性名称和值 * obj 需要遍历的对象 * author: Jet Mah * website: http://www.javatang.com/archives/2 ...

  9. 遍历JavaScript某个对象所有的属性名称和值

    /* * 用来遍历指定对象所有的属性名称和值 * obj 需要遍历的对象 */ function allPrpos(obj) { // 用来保存所有的属性名称和值 var props = " ...

随机推荐

  1. LTE基站开局流程脚本的具体含义

    1.全局参数配置MOD ENODEB(修改基站): ENODEBID=2015(基站标识2015), NAME="安职-1"(基站名称), ENBTYPE=DBS3900_LTE( ...

  2. Elasticsearch系列---Term Vector工具探查数据

    概要 本篇主要介绍一个Term Vector的概念和基本使用方法. term vector是什么? 每次有document数据插入时,elasticsearch除了对document进行正排.倒排索引 ...

  3. Spring Cloud 学习 之 Spring Cloud Eureka(源码分析)

    Spring Cloud 学习 之 Spring Cloud Eureka(源码分析) Spring Boot版本:2.1.4.RELEASE Spring Cloud版本:Greenwich.SR1 ...

  4. 近期总结的一些Java基础

    1.面向过程:当需要实现一个功能的时候,每一个过程中的详细步骤和细节都要亲力亲为. 2.面向对象:当需要实现一个功能的时候,不关心详细的步骤细节,而是找人帮我做事. 3.类和对象的关系:   a-类是 ...

  5. 谈谈Spring bean的生命周期(一)

    简介 本片文章主要讲Spring IOC容器中 bean 的生命周期 Spring bean 生命周期 Spring 中bean的声明周期 可以分为如下4个阶段: 实例化阶段--Instantiati ...

  6. CF#637 D. Nastya and Scoreboard DP

    D. Nastya and Scoreboard 题意 一块电子屏幕上有n个数字. 每个数字是通过这样7个线段显示的,现在你不小心打坏了k个线段,给出打坏之后的n个数字的显示方式,问之前的屏幕表示的最 ...

  7. webview的简单介绍和手写一个H5套壳的webview

    1.webview是什么?作用是什么?和浏览器有什么关系? Webview 是一个基于webkit引擎,可以解析DOM 元素,展示html页面的控件,它和浏览器展示页面的原理是相同的,所以可以把它当做 ...

  8. java经典问题 byte b=1、b=b+1、b+=1

    直接问题: 首先 byte的范围 [-128,127] byte 类型可以自动转为int类型 int类型不能自动转为byte类型. 超过byte的范围,就会变成int类型了 byte b=1:正确, ...

  9. Js调用Android回调处理

    通常在混合app中经常会使用js调用native的方法,一般是: window.nativeApp.call(XXX); 直接调用native方法,对于简单的处理倒是可以,如果需要回调呢?期待的方式是 ...

  10. 关于QQ可以发消息但是网页刷不出来问题

    相信很多人都遇到过这个问题,明明可以登陆QQ,但是网页就是打不开,而且这种情况经常伴有网卡图标显示叹号的情况.笔者这里就教你一个方法,保证好用. 首先,在开始菜单输入cmd,在命令符模式下点击右键选择 ...