1、在修整web大作业的时候,想把js中的代码精简,也就是尽量用js中的方法,而不是单纯的for循环还有写一大堆重复代码。然后我想着用forEach来遍历.children获取的一堆孩子,结果是不行。然后才知道原来children 属性返回元素的子元素的集合,是一个 HTMLCollection 对象,故不支持数组遍历的方法。但它可以用for of进行遍历。又了解到querySelectorAll返回的是一个NodeList对象,和上同理。
HTMLCollection是什么:
它是HTML DOM对象的一个接口,这个接口包含了获取到的DOM元素集合,返回的类型是Object。
这里补充一些验证的方法:
(注:typeof 对于 []数组、/^$/正则、{} 对象、null 空对象 识别出来都是 ‘object’,且typeof只能返回object或function,不可返回array,因为在js中数组即对象)
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var lis=document.querySelectorAll('li');
console.log(lis);
/*
NodeList(3) [li, li, li]
0: li
1: li
2: li
length: 3
[[Prototype]]: NodeList
*/
console.log(typeof lis&& isNaN(lis.length));//false,因为object的长度为undefined
console.log(Array.isArray(lis));//false
console.log(lis instanceof NodeList);//true
console.log(typeof NodeList);//function
for(var i of lis){
console.log(i);//li li li
}
for(var li in lis){
console.log(li);//0 1 2 entries keys values forEach length item
}
console.log('================');
var lili=document.querySelector('ul').children;
console.log(lili);//HTMLCollection(3) [li, li, li]
</script>
引出:如何遍历HTMLCollection ?
1、使用 for of 或for
2、不要使用for in迭代nodeList或HTMLCollection,这是因为for in是用来迭代一个对象的属性,所以结果里输出了lenth,item等属性。
引出:for of和for in的区别
1、本质区别
for...in 遍历得到 key
for...of 遍历得到 value
2、二者适用于不同的数据类型
遍历对象:for...in可以,for...of 不可以
遍历Map Set: for..of 可以,for..in 不可以
遍历 generator:for...of 可以,for...in 不可以
for in例子:
let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o in obj) {
console.log(o) //遍历的实际上是对象的属性名称 a,b,c,d
console.log(obj[o]) //这个才是属性对应的值1,2,3,4
}
for of数组例子:
let arr = ['China', 'America', 'Korea']
for (let o of arr) {
console.log(o) //China, America, Korea
}
for of对象例子:
let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o of obj) {
console.log(o) //Uncaught TypeError: obj[Symbol.iterator] is not a function
}
一个数据结构只有部署了 Symbol.iterator 属性, 才具有 iterator接口可以使用 for of循环。例子中的obj对象没有Symbol.iterator属性 所以会报错。
哪些数据结构部署了 Symbol.iterater属性了呢?
数组 Array
Map
Set
String
arguments对象
Nodelist对象,HTMLCollection 对象 就是获取的dom列表集合
来自:https://blog.csdn.net/one_girl/article/details/80192899(可打开看看自己没有写进来的)
来自:https://juejin.cn/post/7104444342684614664(更深入的,打开看看)
扩展知识:如何遍历取出HTMLCollection里各个节点的属性值,并生成数组(未学)
2、
addEventListener
事件监听回调时,如果把function拆出来写成一个有函数名的函数,则应写成
function handoff(){}
arrrow_next.addEventListener('click',handoff)//handof后面不能带小括号!!!
如果带参数就用匿名函数包裹
arrrow_next.addEventListener('click',function(){handoff(i)})
3、就是图上的文字中的 a标签进一步了解和购买,,鼠标移上去没有点击的那个小手,还是箭头,查了一下给product加了pointer-events:none;再给a加了pointer-events:auto;
然后就出现小手了。
问题:某个点击元素被加上position: absolute属性之后发现没办法点击到了。
原因:这种情况大多数是因为元素绝对定位之后被藏在其他元素的后方了。
就和ppt中的图片被置底一样,但是html中有些情况你还是能看到你的元素,这种情况下我们要把这个元素置顶。
解决:
网上的解决方案是在绝对定位层里面添加:pointer-events:none;这样能够让鼠标事件穿透这个绝对定位层,使之能点击到后面的a,然后再在这个绝对定位层里面需要接受事件的a上面添加:pointer-events:auto;
值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。
后面调了z-index发现可以,z-index要放对位置。