代码之家 › 专栏 › 技术社区 › Marius

删除元素时的DOM事件

dom html5 javascript

3

Marius · 技术社区 · 8 年前

当一个元素从DOM中删除时,有没有什么方法可以直接得到通知 或者作为子树的一部分 ? 似乎只有直接删除节点的方法可用,但我希望在删除包含我节点的整个子树时收到通知。

编辑

似乎问题还不完全清楚,所以我提出了一个挑战: https://jsbin.com/winukaf

DOM如下所示:

<body>
  <div class="root">
    <div class="great-grand-parent">
      <div class="grand-parent">
        <div class="parent">
          <div class="leaf">
            Am I still here?
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

挑战是通知这里的任何一个元素何时被删除,因为这将从DOM树中删除叶节点。

2 回复 | 直到 8 年前

1

7

Marius 8 年前

有一个叫做 MutationObserver 它有很好的 support

举个例子:

// Element is the whatever subtree/element you need to watch over
var in_dom = document.body.contains(element);
var observer = new MutationObserver(function(mutations) {
    if (document.body.contains(element)) {
        if (!in_dom) {
            console.log("element inserted");
        }
        in_dom = true;
    } else if (in_dom) {
        in_dom = false;
        console.log("element removed");
    }

});
observer.observe(document.body, {childList: true, subtree: true});

2

0

Angelos Chalaris 8 年前

你应该使用 MutationObserver API

// Select the node that will be observed for mutations
var targetNode = document.getElementsByClassName('root')[0];

// Options for the observer (which mutations to observe)
var config = {
  childList: true,
  subtree: true
};

// Callback function to execute when mutations are observed
var callback = function(mutationsList, observer) {
  console.log('A child node has been added or removed.');
  console.log(mutationsList[0]);
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

var subElement = document.getElementsByClassName('parent')[0];
var elementToRemove = document.getElementsByClassName('leaf')[0];
var anotherElement = document.getElementsByClassName('great-grand-parent')[0];
setTimeout(function() {
  subElement.removeChild(elementToRemove);
}, 500);
setTimeout(function() {
  targetNode.removeChild(anotherElement);
}, 500);

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

<div class="root">
  <div class="great-grand-parent">
    <div class="grand-parent">
      <div class="parent">
        <div class="leaf">
          Am I still here?
        </div>
      </div>
    </div>
  </div>
</div>