为什么我移除子类，之前得到的arr的length会变

Question

问题描述

这个函数首先我获得一个类的数组，并保存，然后通过父元素移除子元素，但是为什么在移除期间 数组长度会变化呢？

问题出现的环境背景及自己尝试过哪些方法

我在控制台调试了一下，得到数组的那句话只执行一次。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
function removeClassEle(cls){

    var arr = document.getElementsByClassName(cls);
    var c=arr.length;
    var parents = arr[0].parentNode;
    for(var i = 0; i<c; i++){
        parents.removeChild(arr[0]);  //这里有些不明白，为什么移除子元素后arr长度会变呢？arr不是之前读取的吗
    }
    console.log(arr.length) //  1, 0
}

你期待的结果是什么？实际看到的错误信息又是什么？

麻烦大家给给提示

Answer 1

getElementsByClassName返回的是HTMLCollection类型，是类数组，HTMLCollection有它自己的特点：

HTML DOM 中的 HTMLCollection 是即时更新的（live）；当其所包含的文档结构发生改变时，它会自动更新。

当你把类数组转化为数组的时候，长度就不会变了：

function removeClassEle(cls){
    var arr = document.getElementsByClassName(cls);
    var c=arr.length;
    var parents = arr[0].parentNode;
    arr = [].slice.call(arr) // 把类数组转化为数组

    for(var i = 0; i<c; i++){
        parents.removeChild(arr[i]); // 此时删除arr[i]
    }
    console.log(arr.length) // arr.length不会变
}

但是不建议这种方式，因为dom元素已经移除了，但是dom还被arr引用，所以dom不会从内存中移除，有可能会造成内存泄露。

Answer 2

你需要补充值传递和引用传递的知识
对于基本数据类型，Javascript 的 = 是传值
对于对象，Javascript 的 = 是引用

sf 上文章已经不少了： https://segmentfault.com/sear...
可以看下这个： https://segmentfault.com/a/11...

var x = 123;
var y = x;
x = 1024; 
console.log(y); //会输出 123，

var a = [1, 2, 3];
var b = a;
a.pop();
console.log(b);//输出 [ 1 , 2 ]

var a = {myProperty:1024};
var b = a;
a.myProperty = 123;
console.log(b); // 输出 { myProperty: 123 }

Answer 3

简单的说就是因为 var parents = arr[0].parentNode; 这里的 parents 是引用，对应内存中的一个地址，当它里面的值改变了，这个 parents 也会改变。