javascript - 如何检测节点是否已从DOM中删除并返回索引位置

我了解到，您可以通过将目标元素绑定到DOMNodeRemoved事件来检查从DOM中删除的元素。后来我发现此方法已被弃用，并已被mutationObserver()方法替换。我一直在阅读有关此API的信息，但似乎没有办法返回从DOM中删除的元素的索引位置。

有人可以帮我用class="post-container"返回元素的位置吗？

JS：

// select the target node
var target =document.getElementById('post-line');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
 mutations.forEach(function(mutation) {

    if (mutation.removedNodes) {
        //if the element removed has class='post-container' , then get the index position
        console.log( mutation.removedNodes.index() );
    }
  });
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true,subtree:true ,removedNodes: NodeList[1]};

// pass in the target node, as well as the observer options
observer.observe(target, config);

// later, you can stop observing
//observer.disconnect();

HTML：

<div id="post-line">

    <div class="post-container">
        <div><span></span></div>
    </div>

    <div class="post-container">
        <div><span></span></div>
    </div>

    <div class="post-container">
        <div><span></span></div>
    </div>

最佳答案

我发现跟踪一次发生的许多更改的唯一方法是，通过以相反的顺序枚举突变，然后从这些重构的数组中获取索引，来为每个修改的目标重构原始的子数组。这也解决了一个问题，即报告的previousSibling和nextSibling突变可能已被mutations中包含的另一个同时突变所修饰。

var mutationObserver = new MutationObserver((mutations) => {
    // oldParents and oldChildren keep track of the modified targets
    var oldParents = [], oldChildren = [];
    // make a copy of all the modified targets' childNodes
    for (var mutation of mutations) {
        var target = mutation.target;
        if (oldParents.indexOf(target) === -1) {
            oldParents.push(target);
            oldChildren.push(Array.from(target.childNodes));
        }
    }
    // enumerate all mutations in reverse order
    for (var mutation of mutations.slice().reverse()) {
        // (optional) find the first modified ancestor
        var target = mutation.target, ancestor = target, indexPath = [], found;
        do {
            found = false;
            for (var i in oldChildren) {
                var index = oldChildren[i].indexOf(ancestor);
                if (index !== -1) {
                    indexPath.push(index);
                    ancestor = oldParents[i];
                    found = true;
                }
            }
        } while (found);
        // remove added children
        var children = oldChildren[oldParents.indexOf(target)];
        if (mutation.addedNodes.length > 0) {
            // the index of the first added node, the other ones are consecutive
            var index = children.indexOf(mutation.addedNodes[0]);
            children.splice(index, mutation.addedNodes.length);
        }
        // add removed children back
        if (mutation.removedNodes.length > 0) {
            // the index of the first removed node, the other ones are consecutive
            var index;
            if (mutation.nextSibling) {
                index = children.indexOf(mutation.nextSibling);
            } else if (mutation.previousSibling) {
                index = children.indexOf(mutation.previousSibling) + 1;
            } else {
                index = 0;
            }
            children.splice(index, 0, ...mutation.removedNodes);
        }
    }
});