操纵DOM元素产生死循环，你遇到过吗（附解决方案）

引言

在业务开发中，需求各种各样，我们来看这样一段代码，页面中有几个div，我想点击按钮，复制一份到list中,并且打印一下索引值看一下

html部分

    <div class="list">
        <div class="list-item"></div>
        <div class="list-item"></div>
        <div class="list-item"></div>
        <div class="list-item"></div>
    </div>
    <button id="btn">复制一份</button>

javascript部分 

 var list = document.getElementsByClassName('list')[0]
    var item = document.getElementsByClassName('list-item')
    var btn = document.getElementById('btn')
    btn.onclick = () => {
        for (let i = 0; i < item.length; i++) {
            var clone = item[i].cloneNode(true)
            list.appendChild(clone)
            console.log(clone);
        }
    }

 但是我们去浏览器运行一下试试

我们发现输出了很大的索引，并且我的页面还在无限的打印，我们的获取的item集合应该只有4个呀 ，为什么会有这种情况？

原因

我们来看获取dom元素的方式，我们通过的是document.getElementsByClassName('list-item')获取的dom元素,我们来看一下MDN上对于该方法的叙述

 注意其中的重点！！！！elements是一个实时的集合

 所以说，我们每一次复制一份往里面添加的时候，都会导致获取到的集合长度增加，所以会陷入死循环

解决方案

我们可以将改成使用document.querySelectorAll('.list-item')形式去获取，这个API获取的是一个静态集合

var list = document.getElementsByClassName('list')[0]
    var item = document.querySelectorAll('.list-item')
    var btn = document.getElementById('btn')
    btn.onclick = () => {
        for (let i = 0; i < item.length; i++) {
            var clone = item[i].cloneNode(true)
            list.appendChild(clone)
            console.log(i);
        }
    }

 我们再运行到浏览器去看一下

 只打印了四个索引值，证明获取的静态集合