CSSOM-and-MutationObserver-example

A simple way/tutorial of accessing CSSOM to read/modify the stylesheet and use MutationObserver to detect changes in the DOM. It was hard to find information about this. I mean, most of the examples were incomplete or applied only to the inline attributes.

What this does: changes the textbox background color every time a new child is added to a div.

Live example: https://codepen.io/tainan/pen/vvzbwv

Helpful Links (ordered by the good content):

CSSOM:

• https://css-tricks.com/an-introduction-and-guide-to-the-css-object-model-cssom/
• http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml

MutationObserver:

• https://www.htmlgoodies.com/beyond/javascript/respond-to-dom-changes-with-mutation-observers.html
• https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver