This Is Unbelievably Powerful
ฝัง
- เผยแพร่เมื่อ 8 ก.ค. 2024
- Mutation Observer is an amazing tool in JavaScript that allows you to easily and efficiently observe any form of DOM changes. This can include anything from simply adding/removing nodes, all the way to more complex things like changing text/attributes.
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:40 - Mutation Observer Basics
05:50 - Observe Attributes
07:45 - Observe Text
09:35 - Observe Subtree
#MutationObserver #WDS #JavaScript
![[페이스캠4K] 베이비몬스터 치키타 'FOREVER' (BABYMONSTER CHIQUITA FaceCam) @SBS Inkigayo 240707](http://i.ytimg.com/vi/x9VRNTV4VDI/mqdefault.jpg)
You are the best Kyle.....I have been binge watching your JS and CSS videos for the past week and I feel so confident in implementing those concepts in real life...Keep doing this great 10 mins work...😀
Thanks for this video! I just learnt an amazing js tool I did not understand or used before and I can already tell how to implement in my current projects to elegantly solve some problems!
You are the best Kyle. Thanks for fulfilling the request!!
Amazing man! You explain complex concepts in such a simple way! Thanks a ton!
I can see this coming in handy in all sort of scenarios. Thank you for bringing it to my attention.
I'm so happy seeing you cover this topic. Instantly knew my problem understanding this tool is solved after seeing your video.
You are the amazing Kyle, I learn something new everyday from your videos
So useful and so clear! Thank you, Kyle!
I really liked the pace of the video you do not waste time on nonsense and you manage to take complicated topics and simplify them so that it is really easy to understand you
This concept is really good. Thank you so much for the video.
Wow this is great!! Thank you Kyle!!!
Thank you so much for this wonderful explanation, this literally saved my project!
thank you for the detailed explanation. It's much simpler than the documentation.
I like how this was also a review of making changes to the DOM
Thank you very much Kyle! Earlier I was working on a todo list application and I used an event listener to listen for things with the contenteditable attribute to change to rename the todos. I used the DOMCharacterDataModified event listener. But then I learned that was going to go out of support very soon for Mutation Observer. I didn't know that really confusing thing with the text content being a node, and i was so frustrated. Thank you very much for this!
I ended up using the input event listener tho.
Great video. Didn't know how some web features worked, but now I do.
Very helpful video sir.
thanks😊
I'm a Good programmer some might say "Great" but when i watch your videos, i find peace and tranquility in my work and just now i had an eureka moment, All in all thank you and keep the good work
Wow! Didn't know abt this concept earlier but now I know how and where can I use this thing. Thanks ❤️
Thank you so much Kyle
Awesome! thanks for sharing.
Nice one Kyle - thanks!
kyle is back with fire 🔥
Just Saved my early working hours, thanks man
I just now looking for a video for this and my man posted
Awesome, thanks
thanks !!! life savior !
contenteditable nice, I learned something today
That was an insanely good tutorial on mutation observers
Amazing video, Kyle! It would be very nice to watch videos from you involving ReactJS :)
Nice! Thx a lote
you are the best !!!!
Thankyou )).
This is helpful in client scripts on ServiceNow where URL encoding/decoding can save a lot of AJAX calls. Thank you
Amazing Kyle. What code editor are you using there?
Thanks Kyle, you're excellent in your teaching. However, I like to know if it's possible to use mutation observer to capture when a file is selected for upload. If it does, do you have any idea how I can achieve it? It does not seem to work for me.
I've been using it for years. Basically any use-case where you want to detect changes in your DOM, you can easily do using MO.
it's always a workaround. with good external libraries, they should provide events / hooks instead of having to use observers.
@@FunctionGermany so external library is better?
@@FunctionGermany what react library do you recommend?
@@blackboxbs8642 there aren't really "internal" libraries. i should have just left that out. what i meant is that if you have a JS library that manipulates the DOM in any way, it should have hooks or events for you to customize or react to it's behaviour.
@@blackboxbs8642 no idea what you mean with "what react library do you recommend".
I noticed you always clicked the last node which has the full text. How do you handle those previous nodes that are incomplete? I've tried several methods and I always either get a partial node textcontent or several partial ones that may or may not include the earlier nodes.
This came in handy today. I used a MutationObserver to call a function that adds tab stops (for a11y) to a Svelte component after and if the component mounts. The function I call is in jQuery, and I could not figure out how to call the function using a vanilla js custom event. If it was not for this video, I would have been tearing my hair out. :-) Also, it would be cool if you made some Svelte videos eventually. I am interested in your opinion about it coming from React.
thanks Dude / I have question change detection is use to mutationObserver ?
😊😊 waiting for this one after watching your previous observer videos. thank you a lot...
Could this be used to rewrite the useDebugInformation hook? Seems useful for debugging as well?
I notice that you start writing code right at the "root" of the script file. In my browser scripts, the main chunk of code is inside of a document 'DOMContentLoaded' event listener/handler. (At some point, this is what I learned was the pattern for script that's loaded in a web page.) Am I using an antiquated pattern? Does the "defer" when loading the script allow omission of the DOMContentLoaded' event listener?
Yes, defer attribute does that. And if you have your script tag at bottom of a page you also don't have to use this domcontentloaded event. But defer attribute is clearly the best way to handle DOM loading.
@@panmateusz Thank you for this information!
I was about to lost my mind with these dom mutations
🔥🔥
Where are these techniques coming from lol? I've never heard of these before!!! Thank you Kyle.
they are normal DOM APIs and most of them have been around for years. it's just that you rarely need to use these yourself, so not many people know about them.
Good tutorial, though a real situation example would've been nice as I fail to see in what context this can be used.
Love uuuuu
Excellent feature now its going like the reactjs way... so what comes to my mind is future of JavaScript rules all the Frameworks.
is this observer object what react uses to track the life cycle of the components? I'm just curious!
🔥
Make a video on customevents and eventemitter pleaseeee
I have created a variable inside mutation observer that will access the dynamically created element......but the variable is not accessible outside mutation observer
I love you kyle
Is this only works for DOM Element?
What about other JSON object?
I have no idea what I can use this for in practice. What can I make with this? Any follow-up videos anyone can recommend to see its ability to create something on the frontend? All I see is a change in the console. I lack imagination and skills, hence I'm a bit too thick-skulled to see applications; i.e. I'm not a good developer. Thanks in advance for any help.
I have 8+ years in web development. I don't see the application either. In my opinion, this thing is made for ui-libs (react/vue/angular) for their inner purposes.
I also may say that you have potential as a developer because of your honesty. Keep doing bro.
You could use it in a interactive website with many sliders that interact with each other or objects that the user can change its shapes. Think in a interface that has knobs, buttons and switches (like the real analog thing) and it could result in something different, like sounds or visuals.
You could use this to save in realtime the data that the user is filling in a Form (autosave) to prevent losing the information on connection loss.
Yeah, you could do this using another approches or even existing libraries, but all the Observer classes make possible so you can create your own clean implementation for your specific use without having all the unused functions that an existing library could have.
I don't get it. When I do something I already know what I am doing. I don't need a mirror to learn that I am brushing my teeth. Could someone give an example of a problem where I would need this observer?
I was wondering about this too. I wish he showed some use cases for this.
Well, I've seen it used with third party content. At work we had to deliver a highly customized chart...from a chart library. Problem was that when it was drawn again (different data, a highlight, a tooltip) all the DOM mutations we made were gone. One person added a customize callback to this observer. Saved our souls!
instead of a console.log(entries) , you can call another function, for example if you need to check the state of the element in real time, idk if it works like React Js, but it is very useful, the Input element has the "input" event in eventListeners, but not all elements have this event, with this MutationObserver you can implement this event for any DOM element.
Same question popped in my head when I saw the title 😐
I think one might be real time suggestions on the input fields.
More JavaScript projects
What if you change the css that effects an element?
I think that changes the style attribute of the element and also would work
@@Tntpker I'll have to test it but if a class is added to the parent that changes the look of the child and I'm observing the child will it trigger?
@@whatthefunction9140 if you add a class dynamically like toggling the class and are observing the element's class attribute or any for that matter for sure it should. I doubt however, that changing css property values can result in a html mutation. Unless among the options provided in the observemution class you can explicitly observe property values of any css selector.
CSS can't mutate HTML. the resize observer might work though if the CSS animates or transitions an element causing a reflow.
you say powerful in the title, but what's a use case for this API?
What I would want is a vanilla object mutation observer to finally ditch all these frameworks...
You can use Proxy object.
Very nice explanation, but for the sake of clarity, I would suggest giving object names ("mutationObserver") something different than the class from which they are derived just to make clear what's being referred to later on. Also, "const" seems to be way overused these days when a mere "var" would do the job. Less globals the better IMHO. But all in all, really nice.
could this be how git detects changes on committed documents ? I mean when it tracks these files its essentially checking for mutations on the documents right ? so then it keeps the old and new values observed for when a mutation occurs
No, this is a specific JavaScript thing for DOM elements.
The way Git keeps track of changes is with cryptography. It runs a hashing algorithm generates a unique line of characters (x4OfLa4NeA79...) based on the file. This set of characters will always only refer to this exact file, any slight change will result in a wildly different hash. That's how it keeps track of every little change.
@@HandledToaster2 so hashing algorithms should be generally faster at detecting mutations in the files I suppose.
@@thabosiphiwemngoma4772 well yes, as soon as you save the file it'll have a new hash. Exactly what it found different from the last version (the diff) is something else though. I don't know how that one works.
git has nothing to do with JavaScript or the DOM.
@@FunctionGermany I see but I'm sure this functionality is shared in with whatever algorithm is responsible for detecting changes in files.
ive just learned from AppleToaster that its a hashing algorithm
Thank for your quick great tutorial. But I dont understand how this is useful? where this comes to play?
I believe in MutationObserver's supremacy
id with space between words?????
Performance Observer Next?
I want to understand the purpose of this
And this is how they detect ad blockers. I guess. All I have to do is remove the links of block the req.
That's a great tutorial, but what is a use case for mutation observers? I don't see where this can be useful
Ahh, a beautiful way to get rid of ugly intervals looking for potentially dissapearing elements.
Hmm. Could this be used as a security function? Can it log which user makes a change?
there is no security in the frontend. you can't control what's happening in the browser. if someone wants to mess with your page on their computer, they can, and there's basically nothing you can do about it.
@@FunctionGermany I'm not talking about blocking; just tracking any and all changes to identify tampering.
@@michellegiacalone1079 it's not reliable. everything can be circumvented in the browser. you should never consider anything that can happen when a user opens dev tools, there's no point.
@@FunctionGermany I'm speculating out loud. (Out loud? Well, keyboard clicks.) We'll see.
can anyone pls explain MO use cases in real projects
detecting changes of external libraries that don't have events (because they're written poorly)
Hey, could you add "Mutation Observer" to the title? Spent too long looking in my history for this vid, kept finding the the one about Intersection Observer though.
So this is literally state managment? Kind of a native useEffect function from React?
no, this is nothing like state management. i guess you can sort of see parallels to useEffect, but useEffect only compares the identity of a variable to it's predecessor, so it's much simpler than the diffing that mutation observer does to get the changes. you shouldn't compare useEffect and these observer APIs.
@@FunctionGermany guess you are right, though you can use the mutation Observer exactly like useEffect. I think it is comparable, even though this one is much stronger than useEffect.
@@manmanmanichfindekeinennam7613 that's like saying that react hooks and events are comparable - they are not.
Can you please check the vid desc? It does not make too much sense
Thanks for letting me know. I fixed two typos.
Hum first hum first 😂✌️
Just a *little bit* guys
Just came here to say I appreciate the thumbnail without any kind of face expression, seeing those on every video ever on yt and it's really annoying.
Nice feature but why can't you use it with innerHtml and inner Text?
That just makes it useless to me
what is up with all the observing.
it's a series about all the observer APIs.
Do you have to install it with npm
no, it's a native DOM API. you can find documentation on MDN.
@@FunctionGermany Thank you
Is there a reason you defer to console vs a debugger to introspect objects? I find it 100X faster.
it's easier for his target audience. unfortunately beginners are not taught how to use a debugger at first. they always learn it themselves later on, and waste a lot of time with console.log before that.
@@FunctionGermany that's my point, how do we avoid that trap? its also 'easier' to avoid OO, patterns, etc and just nest dozens of if/else... for a while. i would think its worth the investment.
maybe i should start a channel for intermediate devs who can't level up themselves
@@adambickford8720 using a debugger should be very early in a devs journey. i can't tell you what the right thing to do is, i just tell people to learn to use a debugger, or help them using one.
Second
If google docs uses this, a lot of code can be delete.
I know you dont't actually need them, but could u please use semicolons. 😄
Eslint :)
Easier to just use a framework like vuejs
there is no feature overlap between a frontend framework and observers. they are two very different things you can't compare.
perfect, i have now deleted all the "suggested for you" posts on my facebook page:
const mutationObserver = new MutationObserver(posts =>{
console.log(posts);
Array.from(document.querySelector('.d2edcug0.oh7imozk.abvwweq7.ejjq64ki')
.querySelectorAll('.dati1w0a.hv4rvrfc'))
.filter(
div => div.innerHTML.contains('Suggested for you'))
.forEach(div => {
div.parentElement.parentElement.remove();
})
});
mutationObserver.observe(document.querySelector('.d2edcug0.oh7imozk.abvwweq7.ejjq64ki'),{subtree: true, childList: true})