移除最后一个class后HTML标签仍保留class属性的原因解析

执行代码 #

s = document.createElement('span');
console.log(s)
s.classList.add('foo');
console.log(s)
s.classList.remove('foo');
console.log(s)

输出结果 #

<span></span>
<span class="foo"></span>
<span class></span>

疑问 #

为何第三行的标签中仍保留class属性？该属性是否有作用？能否将其视为不存在？

解答 #

• 为什么移除类后class属性还在？
  这是classList API的设计逻辑：调用remove()清空所有类名时，只会把class属性的值设为空字符串，不会直接删除这个属性。浏览器DOM操作就是这么处理的，属于常规行为。

• 空的class属性有作用吗？
  完全没有任何作用。CSS里的类选择器不会匹配空class属性的元素，浏览器也不会因为这个空属性给元素加任何样式或特殊行为，它就是个没有实际意义的空属性。

• 能不能把它视为不存在？
  从功能角度看，完全可以。空class属性的元素和没有class属性的元素，在渲染、样式匹配、交互行为上没有任何区别。唯一的不同只是DOM字符串打印时能看到class=""，但实际开发中这个差异可以忽略不计。

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