12.24遇到的问题之总结

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要放对位置。