映射数组时出现getBoundingClientRect is not a function错误如何解决？

你对NodeList转数组的写法存在错误：

• document.querySelectorAll()返回的本身就是包含所有匹配元素的NodeList对象
• 你的写法[document.querySelectorAll('*[id^="mutable"]')]是把整个NodeList作为唯一元素塞进了新数组，导致nodelistToArray数组长度为1，唯一元素是NodeList实例，不是单个DOM元素
• 你之前map遍历打印的el其实是整个NodeList对象，而非单个video元素，NodeList原型上没有getBoundingClientRect方法，调用就会抛出错误。你在控制台看到的元素列表是NodeList自身的打印内容，不是map遍历输出的多个元素。

修改页面加载时的NodeList转数组逻辑即可，正确写法有两种：

方法1：使用展开运算符 #

var nodelistToArray;
window.addEventListener('load', function() {
  // 把NodeList里的每个元素展开到新数组中
  nodelistToArray = [...document.querySelectorAll('*[id^="mutable"]')];
})

方法2：使用Array.from方法 #

var nodelistToArray;
window.addEventListener('load', function() {
  // 直接将类数组的NodeList转为标准数组
  nodelistToArray = Array.from(document.querySelectorAll('*[id^="mutable"]'));
})

修复后nodelistToArray的每个元素都是独立的video DOM节点，调用getBoundingClientRect方法就会正常运行。
另外建议给滚动事件添加节流逻辑，避免高频触发计算影响页面性能。

内容的提问来源于stack exchange，提问作者Random34544