JSFiddle - React, Tailwind, and code Playground

by Zhelyakea

HTML

<h1>Наблюдение за изменениями атрибутов</h1>
  <nav><a id="back-link" href="/mutation-observers-tutorial/">Вернуться к статье</a></nav>
<div id="demo" data-config="Demonstration">123
</div>

CSS

.modded{
	color: red;
}

JavaScript

/*document.getElementById("back-link").addEventListener('click',function(event){
var isMSIE = /*@cc_on!@*\/0;

if (isMSIE) {
  if(history.length>0){
    event.preventDefault();
    history.go(-1);
  }
} else {
  if(history.length>1){
    event.preventDefault();
    history.go(-1);
  }
}
},false);*/
function createButton() {
	var div = document.getElementById('demo')
	if(document.querySelectorAll('.button').length==0){
		for(i=0;i<4;i++){
			var p4 = document.createElement('button');
			p4.id = i;
			p4.className = 'button';
			div.appendChild(p4);
			p4.innerHTML = 'button '+i;
		}
	}
	else{
		div.innerHTML = '';
	}
}
setInterval(function() {
  //document.getElementById("demo").classList.toggle('modded');
  createButton()
}, 2000);

(function(d){
	/*var btn = d.querySelector('button'),
	clickhandler = function(){
		var demo = d.getElementById('demo'),
		olddata = 'Demonstration',
		newdata =  "Observing multiple attribute changes.";

		demo.classList.toggle('modded');

		( demo.dataset.config == olddata ) ? demo.dataset.config = newdata : demo.dataset.config = olddata;
	}
	btn.addEventListener('click',clickhandler,false);*/

	var mocallback = function(mutationrecords){
		mutationrecords.map( function(mr){
			console.log( mr.target.childNodes );
		});
	}
	mo = new MutationObserver(mocallback),
	options = {
		'childList':true
		//'attributes':true,'attributeOldValue':true,'attributeFilter':['class']
	},
	mo.observe( d.getElementById('demo'),options);
})(document);