模拟属性选择器模拟CSS中的属性选择器

模拟CSS中的属性选择器

<!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>
    <div class="a">A1</div>
    <div class="a b">A2 B-A</div>
    <div class="b">B1</div>
    <div class="a">A3</div>
    <div class="a">A4</div>
    <div class="b">B2</div>
    <div class="b">B3</div>
    <script src="./index.js"></script>    
</body>
</html>

/**
 * 写一个$attr('name','value')函数
 * 根据用户传入的属性名和属性值，找到页面所有满足条件的元素
 */

function $attr(property,value) {
    let elements = document.getElementsByTagName('*'); // 获取页面中所有的标签
    let arr = Array.from(elements); // 将非数组转化为数组
    let arrs = [];
	
	arr.forEach(item => {
		let element = item.getAttribute(property);
		if(property === 'class' ) { // 如果要是类选择器  'aa bb cc' 有多个类名 \b 表示单词的边界
			// 在这里使用正则,而不使用indexOf includes的原因是必须保证 cona2.includes('a') => true
			new RegExp('\\b'+value+'\\b').test(element) ? arrs.push(item) : null;
			return;
		}
        if(value === value ) {
            arrs.push(item);
        }
    })
    return arrs;    
} 

console.log($attr('class','b'));