0

我想知道在给定的情况下找到周围Elements的最干净的方法是什么MutationRecord？

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

工作示例在这里：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/

4

1 回答 1

1

这绝对是有风险的。由于 MutationRecords 是批量处理的，因此 DOM 的当前状态可能难以确定突变的周围节点。例如，如果你有两个 MutationRecord 发送到 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 必须处理的情况，也许您可​​以做一些更简单或更聪明的事情。

于 2014-06-14T03:02:53.317 回答