Question

我想知道找到给定Element周围MutationRecord的最简洁方法是什么？

MutationRecord具有.nextSibling，.previousSibling属性，但可能包含文本节点，我需要获取常规的Element节点。

工作示例在这里：http://jsfiddle.net/tomalec/ceku2/

我尝试使用

mutation.addedNodes[0].previousElementSibling;
mutation.addedNodes[mutation.addedNodes.length - 1].nextElementSibling);

http://jsfiddle.net/tomalec/Q2HFY/2/

然而，它看起来有点冒险，并且对于删除它们根本不起作用。

mutation.removedNodes[0].previousElementSibling; //null
mutation.removedNodes[mutation.removedNodes.length - 1].nextElementSibling); //null

http://jsfiddle.net/tomalec/Q2HFY/3/

Answer 1

绝对有风险。由于MutationRecords是批处理的，因此DOM的当前状态可能使得难以确定突变的周围节点。例如，如果您有两个MutationRecords发送到MutationObserver，第二个MutationRecord可能已删除第一个节点的周围节点，这意味着您无法通过简单 DOM检查来执行此操作。

要使问题具体，请使用此html：

<ul><li>One</li><li>Two</li><li>Three</li></ul>

这个javascript：

var ul = document.querySelector('ul');
while (ul.lastChild) ul.removeChild(ul.lastChild);

突变观察者会获得两个突变记录，你必须做一些花哨的腿部工作来弄清楚它们是否已连接。我不确定那个算法会是什么样子，或者在任何情况下都是可能的。

无论如何，这是我的例子jsfiddle：

http://jsfiddle.net/theazureshadow/88egh/

如果您可以限制MutationObserver必须处理的案例，也许您可以做得更轻松或更聪明。

从MutationRecord获取nextElementSibling（previousElementSibling）的最简洁方法是什么？

1 个答案: