javascript - 前端：DOM节点属性被暗中修改的原理是什么？

Question

【前端】dom结点的属性被暗中修改，这是什么原理？

m是一个dom结点，对m.style.animation赋值“3s myKeyframe”后，m.style.animation的值却是图中那一长串，显然是被处理后的字符串，问题是，这是如何做到的？

我猜测是有一个类似于setter的函数，对我传入的“3s myKeyframe”进行了处理，然后再赋值给m.style.animation，可是这显然不可能实现，因为我是直接对属性进行赋值的，没有机会调用函数。

我想知道这是什么原理？如何实现的

Answer 1

，因为我是直接对属性进行赋值的，没有机会调用函数。

不太明白你说的话，对属性直接赋值，就没有机会调用函数了？setter函数不就可以吗？

const person = {         name: '',         set name(_name) {             name=`peter ${_name}`        },         get name() {             return name;         }}person.name = 'HUAN'console.log(person.name)// peter HUAN

Answer 2

setter就是用来拦截直接对属性赋值的操作,可以试试以下代码
style对象对属性的setter是在底层实现的,所以控制台里看不到拦截器相关的内容

const style = new Proxy({}, {  set(o, p, v) {    o[p] = v + ' abcabc';  },});style.animation = '1s';console.log(obj.animation);

Answer 3

DOM节点属性的修改原理主要涉及到JavaScript的内部处理机制。当你尝试修改一个DOM节点的属性时，JavaScript实际上会将你的修改转换为浏览器可以理解的原始格式。这是因为DOM操作是由浏览器内部处理的，它需要以一种能够理解和操作的方式来表示这些改变。

在你给出的例子中，当你给m.style.animation赋值为"3s myKeyframe"时，JavaScript实际上会把这个字符串转换为一个更复杂的对象结构，这个结构包含了动画的所有信息，包括持续时间、动画名称等。然后，这个对象结构会被转换为一个字符串，以便浏览器可以理解并执行这个动画。

这种转换过程是由JavaScript引擎自动完成的，你无法直接控制它。如果你需要更细粒度的控制，你可能需要使用一些更低级别的API，例如CSSOM，来直接修改CSS样式。

至于你提到的setter函数，这实际上是一种常见的JavaScript实现机制，用于在属性被赋值时执行一些额外的操作。但是在这个例子中，setter函数并没有被调用，因为你是直接修改属性的值，而不是通过一个setter函数来修改的。

总的来说，DOM节点属性的修改原理主要是通过JavaScript引擎的内部处理机制来实现的，它会将你的修改转换为浏览器可以理解的格式。如果你需要更细粒度的控制，你可能需要使用一些更低级别的API。