javascript - 监听 DOM 元素何时移动

Question

我正在尝试做基本上与此 CSS 等效的操作:

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

鉴于这不是有效的 CSS(获取第 n 个子项的 n 值并将其乘以另一个值)，我必须使用 JavaScript 来执行此操作。我可以轻松地在页面加载时做到这一点。我想做的是监听元素何时移动或重新排序，以便它可以重新计算其位置。

无论它是在其当前父节点内移动，还是完全移动到不同的父节点中，这都需要起作用。

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

Answer 1

只是回答了我自己的问题。因为我已经计划使用 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 等虚拟 DOM API 兼容。

至于如何在没有 Web Components 的情况下做到这一点，我想答案是做任何事情 document-register-element填充 attachedCallback 和 detachedCallback。快速浏览一下似乎是 MutationObservers 的东西，而且相当复杂。