实现一个 $attr(name,value)遍历 * 属性位name * 值为value的元素集合 * */
html
<ul>
<li id="AA" class="box clearFix">1</li>
<li name="con" class="content box">2</li>
<li name="BB">3</li>
<li id="AA">4</li>
<li class="clearFix" name="con">5</li>
<li myli="six">6</li>
<li name="BB" id="AA">7</li>
<li class=" clearFix">8</li>
<li myli="six">9</li>
<li myli="six" class="box">10</li>
</ul>
js
// 窗口加载完成执行函数
window.onload = function () {
function $attr(name, value) {
let art = [],
elements = document.getElementsByTagName('*'); // 获取html中所有标签
Array.from(elements).forEach(item => { // 将获取到的元素集合转成数组格式遍历循环
let itemValue = item.getAttribute(name) // 获取到元素上的属性值
if (name === 'class') { // 如果查询class特殊处理
let reg = new RegExp(`\\b${value}\\b`)
if (reg.test(itemValue)) { // 处理 class="content box" 与 class="contentbox" 的情况
art.push(item)
}
return;
}
if (itemValue === value) {
art.push(item)
}
})
return art
}
console.log($attr('id', 'AA'))
}