Capture DOM Changes with MutationObservers

MutationObservers allow us a way to track the changes that happen in the DOM based on other code. If you need to trigger functions that run when changes have been made to your webpages then Mutation Observers are what you need.
Code GIST: gist.github.com/prof3ssorSt3v...

[@iwswordpress]

A very powerful API. Well explained and thanks for showing us.

[@abhaysalvi9787]

Can't thank you enough. You saved my project from the brink of collapse

[@bmehder]

I've made it half way through this playlist.

[@onlineuniversity3718]

This is really well explained! You must be a good teacher. Your voice is crystal clear. Which Mic do you use?

[@SteveGriffith-Prof3ssorSt3v3]

Blue Yeti mic.

[@history-stamp]

Great video! Thanks for sharing the code.

[@bilaluseanabdul7148]

Thanks for the very good explanation.

[@sourishdutta9600]

Wow wow!!! Awesome sir. Share your precious knowledge to us sir. Thank you so much. Can you please do a series on design patterns.

[@SteveGriffith-Prof3ssorSt3v3]

Please add that suggestion to my tutorial request video.

[@sourishdutta9600]

@@SteveGriffith-Prof3ssorSt3v3 sure thanks

[@luiza4142]

good video man, i WISH be like u

[@eugzubv4336]

You are the best.

[@harriselliott9409]

I would also find it really helpful if there was a short section showing how to run this from loading the html, arranging this side by side view etc.

[@SteveGriffith-Prof3ssorSt3v3]

There is nothing to do to make it run. Just open the html file in a browser. The side by side view is just my editor and my browser resized to fit beside each other.

[@harriselliott9409]

Got it. Thank you :-)

[@kickinit333]

Great video. Do you know how this can work that's added by another script and only capture the new text?

[@SteveGriffith-Prof3ssorSt3v3]

Not sure what you are asking.

[@kirankumar-iz3tw]

Thanks so much Bob...and any Udemy courses u made?I will go a head and purchase...

[@SteveGriffith-Prof3ssorSt3v3]

None yet. I want to try and provide as much knowledge as I can for free.

[@harriselliott9409]

Really interesting. Is the HTML/JS shown available please?

[@SteveGriffith-Prof3ssorSt3v3]

Yes. The link is in the description in nearly all of my videos

[@harriselliott9409]

My bad! Found it. Great video and really helpful.

[@dinesh3133]

Hi Steve Griffith , Why we use this what's the benifit of MutationObservers

[@SteveGriffith-Prof3ssorSt3v3]

If you have code that you want to run if an element changes because of another script.

[@history-stamp]

Say a web page includes javascript to make a text editor. Say you want to add new function to the javascript. In my case, I want to add a shortcut key to save changes. I need to notice the user has added text. So that I know when to enable the save shortcut. The shortcut when enable and with text added will then click on the save icon. I could try to modify the javascript on the fly, but the javascript can be changing.

[@SteveGriffith-Prof3ssorSt3v3]

@@history-stamp You wouldn't use this to let a user add new script. That would be a huge security problem. If you want to do something when the user types in a form field then you would use the input event on the textarea. This is to trigger existing functions of your own when something is added to the page or altered.

[@sudhirsingh1459]

@@SteveGriffith-Prof3ssorSt3v3 I guess @historystamp is asking to acknowledge that user has changed some thing need to save, It is useful in page builders.