为何Array.from(classList)[0] = 'className'无法生效？

核心原因 #

Array.from(a)会创建一个独立的数组副本，这个数组只是复制了classList里的类名字符串，和原DOM元素的classList对象没有任何绑定关系。所以你修改这个副本数组的元素，只会改变数组里的值，根本不会影响到DOM元素本身的类名。

正确的修改方式 #

要修改DOM元素的类名，得直接操作classList对象本身，它提供了专门的方法：

1. 使用replace方法替换指定类名：

div.classList.replace('container', 'font');

2. 先移除旧类名再添加新类名：

div.classList.remove('container');
div.classList.add('font');

补充说明 #

classList是DOMTokenList类型的对象，它不是数组，只是实现了类似数组的迭代接口，所以能被Array.from转成数组，但数组和原对象是完全独立的两个实体，修改其中一个不会影响另一个。

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