当前笔记只有一个class情况,纯属视频记录用于后期校验
往下滑:补充 对应p11-2-11.html 笔记:
E:\编程\大前端\Typora笔记\职业知识素养\常见面试题完整解读
笔记在typora和代码练习里
image.png
image.png
image.png
image.png
image.png
image.png
√
image.png
image.png
补充:
let elements = document.getElementsByTagName("*")
console.log(elements);
只能拿到所有的标签名
image.png
所以要转化成数组格式
elements = Array.from(elements) //把非数组转化为数组
image.png
转化完后循环
elements.forEach(item => {
//=>循环每一个的property对应的属性值
let itemvalue = item.getAttribute(property)
//=>每一个当前元素它的class对应的属性值itemvalue
//=>当前元素,它class的属性值
if (itemvalue === value) {
//=>获取的值和传递的值校验成功
// =>有class并且有box
arr.push(item)
}
});
getAttribute
image.png
image.png
把每一个数组里的类名循环校验和传过来的属性是否相等
if (itemvalue === value) {
//=>获取的值和传递的值校验成功
// =>有class并且有box
arr.push(item)
}
最后相等则返回 return arr;
处理分隔单词:
在拿到所有的样式名称后有的名称包含独立单词空格,而有的没有空格,这需要做一个判断如以下问题
image.png
image.png
//=>当前元素,它class的属性值
if (property === 'class') {
//=>根据命名要求单词分割要特殊处理
new RegExp("\\b" + value + "\\b").test(itemvalue) ? arr.push(item) : null;
//=>字符串里俩斜杠才叫一个斜杠
//=>判断当前字符串里有没有包含这个单词
return;
}
全部代码如下:
<body>
<div class="content box"></div>
<div id="AA"></div>
<div myIn="1"></div>
<div class="clear box"></div>
<div name="BB"></div>
<div id="AA"></div>
<div id="AABB"></div>
<div id="AABB AA"></div>
<div class="contentbox"></div>
<div id="AA"></div>
<div myIn="2"></div>
<div class="box"></div>
<div name="BB"></div>
<script>
function $attr(property, value) {
let elements = document.getElementsByTagName("*")
//elements是一个元素集合
arr = [];
// [].forEach.call(elements, item => {})
elements = Array.from(elements) //把非数组转化为数组
console.log(elements);
elements.forEach(item => {
//=>循环每一个的property对应的属性值
let itemvalue = item.getAttribute(property)
console.log(itemvalue);
//=>每一个当前元素它的class对应的属性值itemvalue
//=>当前元素,它class的属性值
if (property === 'class') {
//=>根据命名要求单词分割要特殊处理
new RegExp("\\b" + value + "\\b").test(itemvalue) ? arr.push(item) : null;
//=>字符串里俩斜杠才叫一个斜杠
//=>判断当前字符串里有没有包含这个单词
return;
}
if (itemvalue === value) {
//=>获取的值和传递的值校验成功
// =>有class并且有box
arr.push(item)
}
});
//借用原型身上的forEach
return arr;
}
let ary = $attr('class', 'box')
console.log(ary);
</script>
</body>
网友评论