在实际开发中，有时候我们可能有这样的需求，在元素装载过程中，我们需要一个loading状态提示，当所有的元素装载完之后，移除掉loading状态提示。那么我们就需要一个监控dom节点插入的事件，他会在我们需要监控的节点插入完毕之后，以回调函数的形式告诉我们节点已经插入完毕，并执行相应的操作。

与之相关的有两个玩意儿，一个是DOMNodeInserted事件，另一个是MutationObserver类。

1、使用DOMNodeInserted来监控插入并在节点插入完成后移除loading状态层。

<div id="content">


<div id="loading">loading</div>


</div>


<script type="text/javascript">
	var div = document.createElement("div"),
		container =document.getElementById("content"),
		loading =document.getElementById("loading");
	document.addEventListener("DOMNodeInserted",function(e){
		var node = e.target;
		if(node.parentNode.id==="content"){
			alert("即将移除loading层");
			container.removeChild(loading);
		}
	});
	div.innerHTML = "新插入的内容";
	container.appendChild(div);
</script>

2、使用MutationObserverd来监控插入并在节点插入完成后移除loading状态层。

<div id="content">

<div id="loading">loading</div>

</div>

<script type="text/javascript">
	var div = document.createElement("div"),
		container =document.getElementById("content"),
		loading =document.getElementById("loading");
	var observer  = new MutationObserver(function(mutations){
		mutations.forEach(function(mutation){
			var nodes = mutation.addedNodes;
			for(var i=0,len=nodes.length;i<len;i++){
				var node = nodes[i];
				if(node.parentNode.id==="content"){
					alert("即将移除loading层");
					container.removeChild(loading);
				}
			}
		});
	});
	observer.observe(document, {
        subtree: true,
        childList: true
    });
	div.innerHTML = "新插入的内容";
	container.appendChild(div);
</script>