javascript - 监听DOM元素何时移动

我试图做基本上等效于此CSS：

position: absolute;
top: calc(100px * nth-child);

鉴于那不是有效的CSS（获取nth-child的n的值并将其乘以另一个值），我必须使用JavaScript进行此操作。我可以轻松地在页面上加载一次。我想做的是侦听元素何时移动或重新排序，以便它可以重新计算其位置。

无论它是在当前父节点中移动还是完全移到其他父节点中，这都需要工作。

有人知道怎么做吗？或者，是否可以使用我不知道的纯CSS来做到这一点？

最佳答案

只是回答了我自己的问题。由于我已经在计划使用Web组件，因此事实证明attachedCallback确实可以满足我的需求。

最后，我找出了createdCallback和attachedCallback之间真正的用例区别。

假设您有：

<div>
   <my-element id="a"></my-element>
   <my-element id="b"></my-element>
</div>

然后运行：

var a = document.getElementById("a");
a.parentNode.appendChild(a);

这将把#a移到末尾，产生以下内容：

<div>
   <my-element id="b"></my-element>
   <my-element id="a"></my-element>
</div>

关键是，当调用appendChild（我假设是insertBefore以及所有其他移动节点的函数）时，my-element将首先触发其detachedCallback，然后触发attachedCallback。因此，如果确定其位置的代码包含在attachedCallback中：

myElementPrototype.attachedCallback = function() {
    var myPosition = [].slice.call(this.parentNode.children).indexOf(this);
}

那么无论元素移到哪里，它都将再次确定。这应该与诸如React等的Virtual DOM API兼容。

至于在没有Web组件的情况下如何做到这一点，那么我猜答案是做document-register-element来填充attachedCallback和detachedCallback的任何事情。快速浏览一下，就像使用MutationObservers一样，相当复杂。