MutationObserver

[00:00:00]
>> Eric: Let's go to the mutation observer now, so the mutation observer is different because it allows us to track the changes within the DOM subtree. So it's very useful for rich text editors, for instance, you are trying to select some data and apply the bold text. So the mutation observer will allow us to detect that.

[00:00:23]
The huge benefit of the mutation observer, it's implemented on a native level. So previously in vanilla, how this mutation observer will be polyfilled is you're basically creating a proxy object that will track every mutation of any possible subtree. And this is implemented on a JavaScript level, so you would need to create, if you have a large subtree that would result to some memory issues and console on a native level, it's very fast.

[00:00:56]
And the creation of the mutation observer is pretty simple, we just need to provide a single callback. There are no options to the constructor, and the callback accepts the mutation. And the observe function accepts two parameters, one is the target node that we're trying to observe, here, in this example, it's div, and the observer options.

[00:01:17]
And the observer options is a bit more complicated because we can track many things, so we can configure the observer to track only the child list. So this means that if we provide the child is true, then we go into track the section in each one because they are direct child of development.

[00:01:37]
If we provide the attributes to true, this means that the mutation observer will track any changes in the attributes. And if you provide the character data then if we have any text content and we enter this content using the keyboard, then the mutation observer can detect these changes, like on changing, then on the inputs, and provide us with the mutation observer entry.

[00:02:06]
And there is also one cool thing, is the subtree. So we can basically say that we want to track all the elements in the whole subtree, and we just need to provide the true flag here. We can also filter the attributes that we're currently looking for, and this will reduce the number of time the callback is called.

[00:02:27]
So the best practice is to make sure that you configure the observer in the right way. Try not to overuse the properties, don't set them to true, because this will involve invoking the callback too many times.
>> Speaker 1: So just to clarify, the child list would just apply to direct descendants in the sub tree would be anything?

[00:02:50]
>> Eric: Yeah.
>> Speaker 1: Okay?
>> Eric: And there is a conflict if you apply Charlie's true and the subtree true, then the sub tree will not work because the search Charlie's has the preference, higher priority, okay? So the TLDR make sure that you configure these options right to reduce possible invocation of the observer callback.

[00:03:13]
And the mutation record that the mutation observer provides us is basically has a few properties, so the type, so the type tells us which type of mutation happened. It can be the attribute changed or some data was entered or removed, or it they might be that we added a new DOM element in the direct child list.

[00:03:36]
So it also has the information about the target node, which was triggered the mutation observer. And we also have the edit nodes array that will give us any newly added nodes that were when we inserted some data in the DOM tree or remove nodes. And we can also access the old character data value to see what was the value before the mutation happened.

[00:04:02]
And, again, the callback is pretty simple, we just need to look for a mutation, filtered by our type, and by our logic.