js滚动条下拉一定值_JS遍历DOM节点

最近面试被一个前端大牛虐了一把，当时真想直接走了，没回答出来一直咄咄逼人，一副自以为是的样子，真想扇他。。。

不过他提出的问题确实是比较基础，只能怪自己没有去总结平时工作上遇到的问题，哎。。。不说了，进正题：

场景：

在做页面动态交互的时候，经常需要遍历DOM节点，按照我之前的工作方式，我是直接根据class类名，获取获取DOM元素（今天我说了获取DOM的方法，JQ:$('.XXX')，JS:getElementsByClassName，面试官一直在说JS没有这个方法，我说有，回家再次验证，确实有），然后为这个DOM添加各类事件，这样就有了基本的交互。

面试官：

这个遍历出来的DOM集合是什么？能否使用map、filter、forEach等数组操作的方法？谈谈你对apply()、call()的理解，谈谈你对“懒加载”的理解，并应用与上面这类场景。

这个时候我一脸蒙蔽，平时工作也只是给DOM添加个事件、也console.log打印过DOM集合，感觉像是数组，但是并没有怎么管他，对数组的操作倒是用了map、forEach，apply()、call()等等，实在是想不通他的意思，然后“懒加载”也没有弄过（这个时候他就开始得瑟了）

回家后，反复思考这些问题，从“懒加载”弄起，首先我做了一个页面：

然后去了解了一下“懒加载”：

1.图片进入可视区域之后请求图片资源；

2.对于电商等图片较多，页面很长的业务场景很适用；

3.可以减少无效资源的加载；

4.并发加载的资源过多会阻塞js的加载，影响网站的正常使用；

大致就是在做图片处理的时候，img 的src需要为空或者很小的一张图片，然后自定义个属性，这个属性是图片真正的地址，监听window.scroll，当用户下拉的时候，再加载剩下的图片。

了解这些以后，我开始做，因为需要遍历元素，和获取元素属性（不是简单的事件监听了），所以我拿到元素集合，开始遍历，然后报错。。。。

console.log打印一下，发现拿到的是一个HTMLCollection:

后面了解到：HTMLCollection 对象是带有方法的 HTML 元素的集合，用它可以通过元素在文档中的位置或它们的 id 属性、name 属性获取元素。

关键的是：HTMLCollection 对象是只读的，不能给它添加新元素，即使采用 JavaScript 数组语法也是如此。

再后面不断上网搜索，才了解到“类数组”。

该对象并不是由Array构造函数所创建的，它依然呈现出数组的行为，在这种情况下，这些对象被称为“类数组对象”。

那如何处理“类数组”呢？

答案是可以将它转化成数组，这个时候就用到了call、apply了

OK，终于明白大牛的用心了，心里服气。。。。

转化数组：

Array.prototype.slice.apply(XX); [].slice.apply(XX);

这个时候就可以用数组的方法来操作了，使用map、forEach等等遍历出节点，并拿节点的元素值。。。。