Javascript 为什么设置element.className=null会导致class="；空“；？

显然，尝试将

className

属性设置为null并不会删除

class

属性，相反，它会将其替换为一个字面上称为“null”的类名：

document.querySelector（'p:nth of type（2）'）。className=null
p[class]：：之前{
内容：“
”；
}
p:not（[class]）：：before，p[class=”“]：：before{
内容：“”；
}
p、 空的{
颜色：红色；
}

在JavaScript中，
null
不会转换为空字符串。它将转换为字符串
“null”
。如果手动转换，则可以看到：

var x = String(null);
console.log(x);

MDN的文档中也提到了这一点：

将
null
传递给接受
DOMString
的方法或参数通常会字符串化为
“null”

className
属性（以及相关属性，如
id
）的类型为
DOMString
，它直接映射到JS中的
String
。正是这种转换产生了一个字面上称为“null”的类名，它随后反映在
class
属性中，并由
.null
和
[class~=null]
等选择器匹配

如果您希望
null
转换为空字符串，因为这两个值都是伪值，那么它就不能这样工作。仅仅因为两个值都是伪值，即当转换为布尔值时，两个值都会导致
false
，这并不能使这两个值彼此相等，甚至不严格地相等。特别是，大多数对象，包括字符串，永远不会松散地等于
null
，因为有些东西不能等于零（出于遗留原因，有少数例外）。有一个方便的比较表，你可以参考

要删除
class
属性并从元素中删除所有类名，请将
className
设置为空字符串而不是null：


document.querySelector（'p:nth of type（2）'）。className=''
p[class]：：之前{
内容：“
”；
}
p:not（[class]）：：before，p[class=”“]：：before{
内容：“”；
}
p、 空的{
颜色：红色；
}

您的
内容
属性中的HTML（
..
）不会像您期望的那样工作。@torazaburo:它确实像我期望的那样工作-按字面意思输出“..”。我打算使用
content
属性来反映输出中的标记。不过，它并不像一些读者预期的那样有效。也许我应该修改它以避免混淆。注意：HTML不理解
null
的概念，它是一种标记语言，在文本（
String
）上工作，非常违反直觉，当目标为