Save Observer Initials with airSlate SignNow

Save observer initials

hey guys hey going in this video I'm gonna be showing you how to use the mutation observer in a java script okay so basically this right here is a very powerful tool which lets you observe or react to changes in the Dom so for example you're able to be notified when an attribute has changed its text contents or its attributes or even when child nodes have been added or removed from a parent node or element so definitely a very powerful tool worth learning or at least knowing about so you can definitely come in handy when using external libraries which don't provide their own events so for example if your website is using a library which makes changes to the Dom and you want to know when those changes happen you can definitely do that using the mutation observer so I'm going to be showing you a few examples of how to actually use this and of course what you can actually observe with the mutation observer so let's go inside the text editor right here so essentially we're going to be using this unordered list with a class of summary as the test subject for the mutation observer we're going to be observing or listening for changes on this particular list arathi so let's first get a reference to the list in JavaScript so we can say of course Punk's my list is equal to document into a query selector and pass in here the pass of summary alrighty and then we go down here and we can start using the mutation observer so the way the mutation observer works is essentially in three main steps so let's take a look at those three main steps so the first thing is going to be making a new so making a new mutation observer object so you're gonna need a actual mutation observer itself very similar to the way Ajax works so once you have a mutation observer object you can then tell it what to observe so in this case with this list for the first example we're going to be observing changes to the attributes so basically right here we're gonna tell it to observe changes to of course the attributes and the last step is gonna be what you're gonna do with the change so we can say what to do with the observed changes slash mutation so it's gonna let you pass in a function which lets you of course do your own custom logic or behavior for when the mutations have been made and that is the three steps to using the mutation observer so now let's go down here and firstly do the first step by making a mutation observer object or instance so we can say constant observer is equal to a new mutation observer a rowdy so now this is going to give you right here a mutation observer and it actually takes in a function and that function is going to be step 3 but for now let's come back to that function and instead go down to step two which is of course tell it what to observe so let's go down here and say observer dot observe and this function right here is gonna take in your target node in this case it's going to be the list so you can say my list just like this and right here is an object you pass in which is a list of options so in this case it's going to be essentially you're going to tell it what to observe in this example it's going to be attributes so we can say here attributes like this and you can say true so now we've said to the mutation observer observe this element or node for these particular changes in this case of course just attributes okay so now let's move to step three which is of course your own custom behavior for when the mutations have been observed so we can see here we can pass in the function so the function is going to give you an array of a mutation records or in other words an array of changes so we can say here mutations just like this and now we have our function so as I said this would be an array of changes so for now let's keep things simple and only say console.log to mutations to actually see what is going on so this is the basic usage right here so very few lines of the mutation observer it is now ready to go alrighty cool so let's go down here now and actually make changes for it to observe so we're going to use a set timer to change the attribute on the list so we can say set timer and pass in here a function and this function is going to simply say my list dot set attribute we're gonna change or set the ID for the list to something like some random ID so now we have a change being made one second after the page loads up there re let's now save this and refresh the browser and then wait one second and we get right here in the console an array of mutation records or an array of changes so this right here at element zero so the first change that was observed we can see we get a detailed list of the party mutation or change so for example we can see here first right off the bat how we can see attribute name is equal to ID so we know the ID has changed down here we also get a target so target is going to be the element or node of which the attribute has changed on in this case of course it's going to be the same thing we actually passed in so of course still this element and lastly we get type as being attributes this is just telling you that this particular mutation record is of type attribute so and attribute change alrighty so that is the basic usage of the mutation observer and of course with this array you can essentially do what you want with it so let's take a look at an example of simply just logging out to the console what attribute has changed and what the new value is of the attribute of course here who then actually gets the random ID value that I gave the ID so let's go back inside the text editor and we're going to essentially loop through each mutation so we're going to say mutations dot for each I'm going to say here record and firstly so for each record we're gonna simply console.log the record so of course we can see what's actually happening for each iteration and we can also go down here and do a bit of a safety check so we can say if record dot type is equal to attributes then do something so you might see this come up quite a bit in the usage of mutation observer it's simply just saying you're making sure that the change was for attributes because you can actually pass in a few different options here which we'll get to later on so essentially you're just saying here just making sure that change has been an attribute change alright so inside this condition we can say right here Const changed attribute name is equal to record attribute name in this case this will give us of course ID so we're getting this this property right here and let's go back inside here make a second constant for new value this will be the change to value for the attribute we can say record target dot gets attribute for the attribute name change attribute name so we're simply just calling the get attribute method on the element to get the attribute value for the changed attribute name in this case of course ID then we can simply say something like console.log absolute change new value to four and then pass in here the change patch abused name and we can say something like of course new value and close that up so actually be changed new value for this is this save this and refresh once again we can see here after one second of course we get the record but also we get here attribute change new value for Rd is some random Rd so that right there is an example of how to use the mutations observer to listen for changes for attributes okay now with this you can also pass in a few more options for attributes for example you can tell it to only observe changes for particular attribute names so if I want to only listen for changes to the arm elements class I can say attribute filter and pass in here and array and I can say class for example so now it's still going to observe attributes but only the class attribute all right so now if I was to duplicate this line and say set attribute class and make the class something like summary and then another class for example now we don't expect this particular mutation to appear inside this loop or even inside the mutations so let's save this and refresh once again wait a second and we get right here the mutation record we can see now we only get a single mutation record and we get it for the attribute name of class and not ID and of course down here we get you know new value for class is this guy right here so definitely a useful property now the last one for attributes is going to be called attribute old value so we can say here have tribute old value and set that to true the default is false and this right here is gonna give you the old value for an attribute so of course here we can see the class was originally summary so to get this information it's quite easy you simply say attribute hold value is true then I can save this and refresh for the mutation record if I expand this the old value property is now filled with the text summary and this what he is of course the old value for the attribute of class all right so definitely very useful stuff and that is all I have for the attributes example so now let's take a look at another example and that's going to be listening or observing changes to the child's list so basically when elements or nodes have been added or removed from a parent node so let's just get rid of all this stuff okay and we can go inside the options and specify the options for listening for or observing changes to the child list and this is going to be called child lists okay set this to true and you are good to go so now the imitation observer is gonna observe when child nodes have been added or removed from the list element all right so firstly we might go in the set samya and actually make these changes so we're going to remove the last you know let's remove the first list item from the list so we can say my list dot remove child and pass in here my list dot first element child so now of course we want to actually listen and react for when this happens so let's go inside the mutation observer for each loop and we're going to firstly just console.log the record and that is basically it let's save this refresh wait one second and we get right here of course the list item has been removed from the first spot and we get here mutation record for that mutation expand this and we get here removed notes it's a no list of the removed notes in this case the list item all right if I was to expand this we can see we get all of the information for that removed list item of course here the innerhtml lets you have to change it and um etc so we get here of course the list of removed notes the same thing works for up here added nodes so let's go back inside here and actually add a node so we can say constant new Ally to make a new list item element I'm gonna say document creates element and pass in here a lie we can then say something like a new ally dot text content is equal to pay how I and we can say in my list like append child and we can pass in here new ally so now we expect to see to mutation records one for the removal of this trial and mark for the addition of this child let's save this refresh and you can see here we get two records of course added notes nothing remove nodes of course same as earlier down here we can see now added nodes as being a list of nodes which were added of course so in practice let's go back inside the editor and we can go inside here and we can do a very similar thing so in this case and same for the previous case we know that we're passing in the only child list so it may not be completely necessary to actually check for the type so instead we're gonna go straight in and we're gonna say if record got added nodes link is greater than zero let me consider is there something like number of nodes and we can say of course record added nodes dot link if I use template strings here you might actually work so we can say record added nodes dot length for the number of added nodes and do the same thing for the removes nodes so of course pretty basic basic example of how to actually of course use this so we can then say it removes nodes and just say here remove and save this refresh and now we see here knows removed one and of course nodes added one so definitely you know take what you want from this mutation record and of course you use it for your own personal or specific use case alright and that is how you can listen for changes to the child list all right next up is going to be changes to text which is very similar to the child list changes so let's let's go down here and of course this remove all of this stuff or once again and remove all the this stuff so what's hex changes basically in most cases when you're making changes to texts you're going to be using the text content or the inner HTML properties so for example if we were to say my list dot first element child so we're going to be taking a look at a sense of the text changes for the first list item so changes to the stuff inside here so we're going to say my list dot first element child the first list item we're gonna say dot text content is equal to something else so in most cases you're going to be using the text content property to make changes to text all right or alternatively the inner HTML property now both these examples the way they insert text is by basically removing all of the previous text notes and then adding new text nodes for the new text so technically speaking this isn't changes to text it's more changes to the child list since you're removing nodes and then re adding new nodes with the new texts okay so with that being said let's just keep this the way it is and loggia each record alright with this change we should see changes in the console so let's save this refresh we see here nothing sorry let's go back inside here I forgot to make this my list first Allanon child so of course I'm gonna pass in this time the first list item save this refresh once more and now we should see in the console mutation record so let's expand this we can see once again we get removed notes and no list of texts so we removed this text node which had the information let's see we have to change the Dom of course right now we also get added nodes with text this text was something else so as I said with text content you're removing the previous node and you're adding a new text node okay so that's why it is technically a child list change so if you want to of course use this information and during an example of actually listening for text itself you can I want to check for essentially changes to sorry you can I want to check and that the added notes and the removed nodes were actually text notes okay so that way you can accurately say that this was a change to text if that makes sense I'll just show you in code it's a lot easier to explain so we can say here if then we can say record added nodes dot length is equal to one so if there was a single added node the new text okay and we're gonna say record type added nodes at index 0 dot node type is equal to node dot text node then we know there's been a change to text so essentially what's happening here is the node type property of this node is gonna give you a constant one of these values in this case we're saying is it a text mode add it and a text node was removed so we can just copy and paste this then we can say that of course the text has been changed in most cases this will work but in some cases maybe not maybe have not supported move to text nodes you'll need to adjust accordingly but this should work in most cases so basically saying if there was a single text node added and a single text node removed then we can do something all right we're gonna say console.log text changed from this so record dot removed nodes at index 0 dot node value so node value is going to give you the actual text for the text node we can say text change from this to and then passing here the new value so record added nodes at index 0 dot node value and then cut this off right here so it's a bit more complex but essentially we're just checking that the change is sort of child lists were text node changes all right save this refresh here wait a second and we get here text change from lets you make lets you react to change in the dumb to something else so it works just fine all right cool so that is essentially what you might do to listen for changes to text because in most cases including inner HTML changes so let's make this and something else this is gonna work save this refresh and now we can see here we get two of these changes something else to add something else and of course the previous one right here so this is going to work for text content and inner HTML property changes now it's not gonna work if you use inner HTML and add something like a break tag for example now we're introducing a second node here the first one is an HTML element the second one is a text node so now the length is going to be 2 for the removed sorry for the added notes let's save this and refresh and now we can see here that we get my just remove the first one to make it simple okay save this refresh once again we can see here that for the record we get added nodes a break tag or a break element and a text node and here we get just a texture for the remove note so in this case we don't get that console.log so to make changes for that we got to we have to say - for the added note length and of course you're gonna need to adjust this for your own particular scenarios but that is how you can actually do it using the mutation observer okay cool so now we've covered text let's take a look at now more text changes but this one is it's going to be text changes to a text node itself okay so I thought I'd cover it because it's actually part of the mutation observer so let's get rid of all this stuff once again and refresh from scratch so we can also remove this child list so to observe text changes for a single text node you can use character data okay and this one works a bit similar to the attributes so you can say about here true and now here you're gonna pass in an actual text node itself so let's use this text node right here as the example we can gain access to this text node by saying my list first element child dot child nodes at index 0 okay so the first child node of this list item is going to be the text node right here so passing in a text node to the mutation observer observed method and we're saying character data as being true which lets you observe changes to the character data or text within the text node so to make this modification to the text node you can say right here my list of first element child child notes or you know what I could actually use the first child property so I can say first Todd but here it does the exact same thing so we can say here first child dot nodes the value is equal to how's it going how's it going so now this is a different way of updating text on a page it's going to be editing the text node directly itself so now with this particular change the observer can actually know about it so I'm gonna save this refresh and you can see here of course how's it going that worked just fine the mutation record tells us here that the type was character data and the target was text so very similar to the attributes option we can simply say to get the new value we can we can say something like you know console.log we can say you know text has changed text has changed and we can say new value and we can say record duck target duck node value it's gonna give us the new value and that's basically it save this refresh and we can see right here new value how's it going so it works perfectly fine so you can also give it an old value option once again so you can say code the data old value and make that true and now the old value property is going to give you an actual value we can say yeah hold devalue is of course record old value save this refresh once again we can see here the record gives us hala belly of course that same text from earlier and we can see here new value how's it going old value and that text from earlier ok so that is how you can listen or react to or observe character data changes on text notes alright so for the last example here it's gonna be sub trees so essentially you're able to post get rid of all the stuff once again to start fresh you're able to pass in an option to the observer to say subtree is equal to true and this is gonna let you listen for changes for the element you pass in or the node you pass in and everything else within it inside the subtree okay so what this means is if i was to make this observe my list so the parents element and then change the attribute on let's say this list item then we're gonna see it appear in the mutation record so let's go here and say attributes and we can say true for example then go down here in the set timeout we're gonna say firstly my list dot set attribute we're gonna change your ID to once again some random ID like previously but also gonna say my list first element child dot set attribute and make this another ID so now we're making changes to not only the parent but also one of the list items so now with subtree turned on we should see records for both of these changes let's save this and refresh we get here two records of course one for the target the main parent list and one for the actual list item and that right there is why the target property is useful because the target is not always going to be the same node you actually pass in and just to further prove this example if I was to take subtree off then save this and refresh we can see now we only get the single record of course for the target you actually pass in and one last thing for this video is going to be how to actually say to stop observing changes so we can do this by saying observer dot disconnects and this right here it's gonna basically say stop observing changes for this stuff right here and you should always call this if you know you are done observing changes alright so now we don't expect any changes to of course appear in this callback function because we're calling this before this set timer has been executed let's save this once again for the last time for this video refresh and we can see right here we get no changes all right and that right there is the mutation observer in JavaScript thanks for watching guys and our Cielo