面试题-实现一个 $attr(name, value)遍历，属性为 name,值为 value 的元素集合

灰太狼 2021-08-28 02:07 331阅读 0赞

**实现一个 $attr(name, value)遍历，属性为 name,值为 value 的元素集合**

> let arr = $attr(‘class’, ‘box’); => 获取页面中所有 class 为 box 的元素

来看看我们该如何解决：

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>$attr</title>
    </head>
    <body>
    	<div id="AA" class="box"></div>
    	<div test="1"></div>
    	<div class="content box"></div>
    	<div name="bb"></div>
    	<div></div>
    	<div id="BB"></div>
    	<div test="1"></div>
    	<div class="box"></div>
    	<div test="2"></div>
    	<div name="BB"></div>
    	<div class="clearfix"></div>
    </body>
    </html>
    <script type="text/javascript" src="./index.js"></script>

index.js

function $attr(prototype, value) { 
    	// 获取页面中所有的标签
    	let elements = document.getElementsByTagName('*'),
    		arr = [];
    	// 将类数组循环--使用数组的 forEach
    	[].forEach.call(elements, function(item){ 
    		// 获取到要找的属性值
    		let itemVal = item.getAttribute(prototype);
    		// 样式类做特殊处理
    		if (prototype === 'class') { 
    			// 将这个 value 值作为正则，以这个 value 值开头并结尾才可以
    			// 比如 box
    			// reg.test("con box") => true
    			// reg.test("conbox") => false
    			// 这里不适用直接用 indexOf 和 inculdes,用这两个还得做处理，
    			// 用正则最简单
    			new RegExp("\\b"+ value +"\\b").test(itemVal) ? 
    			arr.push(item) : null;
    			return;
    		}
    		// 判断获取到的属性值是否和我们需要的值相等
    		if (itemVal === value) { 
    			arr.push(item);
    		}
    	})
    
    	// 或者使用 array 的 from 方法，把一个非数组转换为数组
    	// elements = Array.from(elements);
    
    	return arr;
    }
    
    let ary = $attr('class', 'box');
    console.log(arr);

公众号：Coder 杂谈，欢迎关注  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzQ1MjM3_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzQ1MjM3_size_16_color_FFFFFF_t_70]: /images/20210813/b8745ad16ef94f6092df292a0e37d7ba.png

发表评论取消回复

表情：

评论列表（有 0 条评论，331人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery 获取元素的value属性值为[object HTMLInputElement]问题解决

问题描述：获取元素的value属性值为\[object HTMLInputElement\]。问题分析： 1、用一个和元素id同名的变量给该元素的value属

阳光穿透心脏的1/2处/ 2023年01月05日 12:56/ 0 赞/ 274 阅读

相关 Java中找出List集合中属性名为key属性值为value的对象

前言：在日常开发中，我们需要从一个 List 集合中找出其中某一个对象，下面就介绍如何从 List 集合中找出属性名为 key 属性值为 value 的对象 1、方法 ge

傷城~/ 2022年12月01日 15:56/ 0 赞/ 350 阅读

相关 Springboot @Value 获取值为 null

看了很多类似的文章，这是他们总结的@value能获取到值的要求 > 1.使用@value 的类中必须被@Service 或@Component注解 > 2.从请求进入

小灰灰/ 2022年09月08日 11:48/ 0 赞/ 316 阅读

相关各种集合key，value能否为null

HashMap key，value都可以为null static final int hash(Object key) { int h;

快来打我*/ 2022年03月09日 04:40/ 0 赞/ 380 阅读

相关 java Map集合嵌套，value为Map和value为List

java Map集合嵌套，value为Map和value为List 2013年12月13日 23:13:34 [wuer0520][] 阅读数：12476

忘是亡心i/ 2022年03月06日 09:24/ 0 赞/ 602 阅读

相关 Spring Boot @Value 注解为 static 属性赋值

private static String IP; @Value("${spring.openoffice.ip}") public void

女爷i/ 2022年02月27日 20:56/ 0 赞/ 333 阅读

相关 @Value取值为NULL

@Value("${tag}") private String tagValue; 但是取值时，有时这个tagvalue为NULL，可能原因有： 1、使用s

悠悠/ 2022年02月03日 10:27/ 0 赞/ 370 阅读

相关 @Value初始化有值，再次调用为NUL

业务场景 1. 为了解决数据对标中重复发送数据redis中的key影响。 @Value("$\{redis.cluster.nodes\}")

桃扇骨/ 2022年01月31日 10:25/ 0 赞/ 148 阅读

相关 @Value取yml文件值为null

之前写了一篇@Value取值问题今天又莫名其妙的失效了先看看这次的代码 @Component public class ComTest {

我会带着你远行/ 2021年10月03日 03:00/ 0 赞/ 574 阅读

相关面试题-实现一个 $attr(name, value)遍历，属性为 name,值为 value 的元素集合

实现一个 $attr(name, value)遍历，属性为 name,值为 value 的元素集合 > let arr = $attr(‘class’, ‘box’); =>

灰太狼/ 2021年08月28日 02:07/ 0 赞/ 332 阅读