javascript - 如何修改只读属性(element.classList)或将其分配给 javascript 中的其他值？

Question

window.addEventListener('keydown',function(e) {
    const key= document.querySelector(`div[data-key='${e.keyCode}']`);
    console.log(key.className);
    console.log(key.classList);
    key.classList=['ajay','dish'];
}

<div data-key="65" class="key ajay">
			<kbd>A</kbd>
</div>

上面是chrome devtools修改值后的截图。

我阅读了MDN element.classList 是只读属性，但可以通过 add() 等进行修改。

我将它分配给其他一些数组，这也能正常工作。

在其他情况下，每当我尝试修改/分配只读属性时，它总是给出 typeError。

Answer 1

很好的问题。

我最初并不知道您问题的确切答案，但我对这种行为并不感到惊讶。该规范定义了所有兼容的用户代理(浏览器)必须实现的最低要求。它还定义了开发人员在以兼容的用户代理(浏览器)为目标时可以期望和依赖的所有功能。添加额外的非标准功能取决于浏览器。

这意味着所有浏览器都必须实现一个名为classList 的get 属性。开发人员应该只期望 get 属性在浏览器中可用。浏览器可能认为开发人员也可以方便地实现 set 功能。浏览器做这种事情是相当普遍的。有时，此类功能会添加到较新版本的标准中，有时却永远不会实现，因为标准委员会不同意该功能的纯度。

有时非标准功能会被弃用甚至删除，尽管这需要数年时间 - 这是开发人员不在其他标准功能可以实现相同目标时依赖非标准功能的一个很好的理由(对于例如，属性 className 可用于覆盖 classList)。

但是技术上到底是怎么做到的呢？

Chrome 以一种非常聪明的方式实现了这一点(可能最初是 WebKit)。它将属性 PutForwards 应用于 classList 的定义。

这允许属性被定义为readonly，但是当赋值时，对象的属性之一被赋值，而不是整个对象。在这种情况下，子属性名称是 value。

所以，代码 document.body.classList = '123';
与 document.body.classList.value = '123';

相同

您可以通过在 Chrome 控制台中运行以下命令来确认对象未被替换

const body = document.body;
const oldClassList = body.classList;
const oldValue = body.classList.value;
body.classList = "new-class";
const newClassList = body.classList;
const newValue = body.classList.value;
console.log(
  "classList changed:", oldClassList !== newClassList, // false
  "value changed:", oldValue !== newValue // true
);

Chromium源码中classList的定义

[Affects=Nothing, SameObject, PerWorldBindings, PutForwards=value] readonly attribute DOMTokenList classList;

可以在以下位置找到: https://github.com/chromium/chromium/blob/4141778eb03a31a20d9e109f74faf2f756b4a8c4/third_party/blink/renderer/core/dom/element.idl#L37

注意这与规范中的定义有何不同

[SameObject] readonly attribute DOMTokenList classList;`  

可在 https://www.w3.org/TR/dom/#element 找到

源代码中的测试解释了属性与在其注释中覆盖只读属性的能力之间的关系

// Even though classList is readonly, PutForwards=value means that its value is forwarded.

可以在以下位置找到: https://github.com/chromium/chromium/blob/f18e79d901f56154f80eea1e2218544285e62623/third_party/WebKit/LayoutTests/fast/dom/HTMLElement/resources/class-list.js#L13