I'm building a mini-app that will display when changes to the DOM have been made by JavaScript. I have all of the functions that I can think of listed in the code. Is there a way to consolidate the functions into one, and have the overrides still function correctly?
var DomChanges = (function() {
var a = Element.prototype.appendChild
, b = Element.prototype.removeChild
, c = Element.prototype.insertBefore
, d = Element.prototype.insertAfter
, e = Element.prototype.insertAttribute
, f = Element.prototype.removeAttribute
, g = Element.prototype.replaceChild
, h = Element.prototype.createElement;
Element.prototype.appendChild = function(){
DomChange('appendChild', arguments);
a.apply(this, arguments);
};
Element.prototype.removeChild = function() {
DomChange('removeChild', arguments);
b.apply(this, arguments);
};
Element.prototype.insertBefore = function() {
DomChange('insertBefore', arguments);
c.apply(this, arguments);
};
Element.prototype.insertAfter = function() {
DomChange('insertAfter', arguments);
d.apply(this, arguments);
};
Element.prototype.insertAttribute = function() {
DomChange('insertAttribute', arguments);
e.apply(this, arguments);
};
Element.prototype.removeAttribute = function() {
DomChange('removeAttribute', arguments);
f.apply(this, arguments);
};
Element.prototype.replaceChild = function() {
DomChange('replaceChild', arguments);
g.apply(this, arguments);
};
Element.prototype.createElement = function() {
DomChange('createElement', arguments);
h.apply(this, arguments);
};
function DomChange (ftype, arguments) {
console.log('Dom has been changed');
};
}());
