ozzieperez/Test page for DOM Mutation Events

## Test page for DOM Mutation Events
<html>
<!--
    POC that detects DOM mutations on FF13+ and Chrome.
    Uses MutationObserver, or DOM events as a fallback.

    ###################################################

    For IE compatibility, replace:

    myElement.addEventListener ('eventNameHere', callBackNameOrFunctionHere, false);

    with the following pattern:

    // Create IE + others compatible event handler
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
    var eventer = window[eventMethod];
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

    // Listen to message from child window
    eventer("eventNameHere", callBackNameOrFunctionHere, false);

-->
<head>
    <script type="text/javascript">
        var containerParent = null, container = null, textNode = null, domchanged=false;

        function Init () {

            container = document.getElementById ("container");
            textNode = container.firstChild;
            containerParent = container.parentNode;

			// Is Mutation Observer supported? It's the best way to go if is.
			var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
			if(MutationObserver)
			{
				// select the target node
				var target = document.querySelector('body');

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

					//for debugging purposes... we only need to call once if a change happened
				    mutations.forEach(function(mutation) {
				    	OnDomChange(mutation.type);
				    });
				});

				// configuration of the observer:
				var config = { attributes: true, childList: true, characterData: true, subtree: true }

				// pass in the target node, as well as the observer options
				observer.observe(target, config);
			}
			// Mutation Events is the next best thing, though not as efficient.
			else
			{
				if (textNode.addEventListener) {
	                textNode.addEventListener ('DOMAttrModified', OnNodeInserted, false);
	                textNode.addEventListener ('DOMCharacterDataModified', OnNodeInserted, false);
	                textNode.addEventListener ('DOMNodeInserted', OnNodeInserted, false);
	                textNode.addEventListener ('DOMNodeInsertedIntoDocument', OnNodeInsertedIntoDocument, false);
	                textNode.addEventListener ('DOMNodeRemoved', OnNodeRemoved, false);
	                textNode.addEventListener ('DOMNodeRemovedFromDocument', OnNodeRemovedFromDocument, false);
	            }
			}
        }

        function OnDomChange(type){
        	if(type){
    			console.log("DOM change of type '" + type + "' detected.");
    		}
        }

        function RemoveContainer () {
            if (container.parentNode) {
                container.parentNode.removeChild (container);
            }
        }

        function RemoveTextFromContainer () {
            if (textNode.parentNode) {
                textNode.parentNode.removeChild (textNode);
            }
        }

        function AddContainer () {
            if (!container.parentNode) {
                containerParent.appendChild (container);
            }
        }

        function AddTextToContainer () {
            if (!textNode.parentNode) {
                container.appendChild (textNode);
            }
        }

        function ChangeTextInContainer () {
            if (textNode.parentNode) {
                textNode.nodeValue = "This is a message on: " + new Date();
            }
        }

        function ChangeAttributeOnElement () {
            if (textNode.parentNode) {
                container.className += " NewClass";
            }
        }

        function AddElementsInALoop () {
            if (container.parentNode) {
            	var loopCount = 5;

            	for(var i=0; i < loopCount; i++){
            		var span = document.createElement("p");
            		var text = document.createTextNode("I'm in a 'p' element: " + i);
            		span.appendChild(text);
                	container.appendChild(span);
            	}
            }
        }

        function OnNodeInserted () {
            console.log ("The text node has been added to the container.");
        }
        function OnNodeInsertedIntoDocument () {
            console.log ("The text node has been inserted into the document.");
        }
        function OnNodeRemoved () {
            console.log ("The text node has been removed from the container.");
        }
        function OnNodeRemovedFromDocument () {
            console.log ("The text node has been removed from the document.");
        }
        function OnAtributeModified () {
            console.log ("An element attribute was changed.");
        }
        function OnCharacterDataModified () {
            console.log ("An element text was changed.");
        }
    </script>
</head>
<body onload="Init ()">
    <h1>Detecting DOM Mutations</h1>
    <h3>Open your console log to see the changes.</h3>
    <button onclick="RemoveContainer ()">Remove the container</button>
    <button onclick="RemoveTextFromContainer ()">Remove the text form the container</button>
    <button onclick="AddContainer ()">Insert the container into the document</button>
    <button onclick="AddTextToContainer ()">Insert the text into the container</button>
    <button onclick="ChangeTextInContainer ()">Change the text in the container</button>
    <button onclick="ChangeAttributeOnElement ()">Add a CSS class to the container</button>
    <button onclick="AddElementsInALoop ()">Add elements in a loop</button>
    <br /><br />
    <div id="container" style="background-color:#599BF7; width:300px; height:auto; padding:10px">
        This is the text in the container.
    </div>

</body>
</html>
	<html>
	<!--
	POC that detects DOM mutations on FF13+ and Chrome.
	Uses MutationObserver, or DOM events as a fallback.

	###################################################

	For IE compatibility, replace:

	myElement.addEventListener ('eventNameHere', callBackNameOrFunctionHere, false);

	with the following pattern:

	// Create IE + others compatible event handler
	var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
	var eventer = window[eventMethod];
	var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

	// Listen to message from child window
	eventer("eventNameHere", callBackNameOrFunctionHere, false);

	-->
	<head>
	<script type="text/javascript">
	var containerParent = null, container = null, textNode = null, domchanged=false;

	function Init () {

	container = document.getElementById ("container");
	textNode = container.firstChild;
	containerParent = container.parentNode;

	// Is Mutation Observer supported? It's the best way to go if is.
	var MutationObserver = window.MutationObserver \|\| window.WebKitMutationObserver \|\| window.MozMutationObserver;
	if(MutationObserver)
	{
	// select the target node
	var target = document.querySelector('body');

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

	//for debugging purposes... we only need to call once if a change happened
	mutations.forEach(function(mutation) {
	OnDomChange(mutation.type);
	});
	});

	// configuration of the observer:
	var config = { attributes: true, childList: true, characterData: true, subtree: true }

	// pass in the target node, as well as the observer options
	observer.observe(target, config);
	}
	// Mutation Events is the next best thing, though not as efficient.
	else
	{
	if (textNode.addEventListener) {
	textNode.addEventListener ('DOMAttrModified', OnNodeInserted, false);
	textNode.addEventListener ('DOMCharacterDataModified', OnNodeInserted, false);
	textNode.addEventListener ('DOMNodeInserted', OnNodeInserted, false);
	textNode.addEventListener ('DOMNodeInsertedIntoDocument', OnNodeInsertedIntoDocument, false);
	textNode.addEventListener ('DOMNodeRemoved', OnNodeRemoved, false);
	textNode.addEventListener ('DOMNodeRemovedFromDocument', OnNodeRemovedFromDocument, false);
	}
	}
	}

	function OnDomChange(type){
	if(type){
	console.log("DOM change of type '" + type + "' detected.");
	}
	}

	function RemoveContainer () {
	if (container.parentNode) {
	container.parentNode.removeChild (container);
	}
	}

	function RemoveTextFromContainer () {
	if (textNode.parentNode) {
	textNode.parentNode.removeChild (textNode);
	}
	}

	function AddContainer () {
	if (!container.parentNode) {
	containerParent.appendChild (container);
	}
	}

	function AddTextToContainer () {
	if (!textNode.parentNode) {
	container.appendChild (textNode);
	}
	}

	function ChangeTextInContainer () {
	if (textNode.parentNode) {
	textNode.nodeValue = "This is a message on: " + new Date();
	}
	}

	function ChangeAttributeOnElement () {
	if (textNode.parentNode) {
	container.className += " NewClass";
	}
	}

	function AddElementsInALoop () {
	if (container.parentNode) {
	var loopCount = 5;

	for(var i=0; i < loopCount; i++){
	var span = document.createElement("p");
	var text = document.createTextNode("I'm in a 'p' element: " + i);
	span.appendChild(text);
	container.appendChild(span);
	}
	}
	}

	function OnNodeInserted () {
	console.log ("The text node has been added to the container.");
	}
	function OnNodeInsertedIntoDocument () {
	console.log ("The text node has been inserted into the document.");
	}
	function OnNodeRemoved () {
	console.log ("The text node has been removed from the container.");
	}
	function OnNodeRemovedFromDocument () {
	console.log ("The text node has been removed from the document.");
	}
	function OnAtributeModified () {
	console.log ("An element attribute was changed.");
	}
	function OnCharacterDataModified () {
	console.log ("An element text was changed.");
	}
	</script>
	</head>
	<body onload="Init ()">
	<h1>Detecting DOM Mutations</h1>
	<h3>Open your console log to see the changes.</h3>
	<button onclick="RemoveContainer ()">Remove the container</button>
	<button onclick="RemoveTextFromContainer ()">Remove the text form the container</button>
	<button onclick="AddContainer ()">Insert the container into the document</button>
	<button onclick="AddTextToContainer ()">Insert the text into the container</button>
	<button onclick="ChangeTextInContainer ()">Change the text in the container</button>
	<button onclick="ChangeAttributeOnElement ()">Add a CSS class to the container</button>
	<button onclick="AddElementsInALoop ()">Add elements in a loop</button>
	<br /><br />
	<div id="container" style="background-color:#599BF7; width:300px; height:auto; padding:10px">
	This is the text in the container.
	</div>

	</body>
	</html>