Are DOM modifications synchronous?

1. If I modify the DOM, can I be sure that that the next line of code has consistent access to that modification? 2. Same question, but for Tasks, microtasks, queues and schedules.
11 Replies
Jochem
Jochem12mo ago
I'm pretty sure dom modifications are synchronous, no idea about the rest I would like to ask you to keep your ABOUT ME in your profile work appropriate, this is not the place to advertise adult games in your bio. Please let me know when you've updated it
Zoë
Zoë12mo ago
Yes, DOM changes are part of the event loop. As such if you make changes to the DOM the next line will consistently be unaware of the change you have made If you do anything to make code run on another loop it will see those changes reliably For instance adding a class and then in a setTimeout with no delay checking the class Sometimes it’s annoying but most times it makes sense. It allows you to make a bunch of changes and then they’re all then applied at once Edit: I'm not sure what's going on rn
Bawdy Ink Slinger
@Jochem done. sorry
Yes, DOM changes are part of the event loop. As such if you make changes to the DOM the next line will consistently be unaware of the change you have made
Hm. Why is it that this prints 1 when I run it as one line in the console? document.body.append(document.createElement("div")); console.log(document.querySelectorAll("div").length);
Jochem
Jochem12mo ago
No worries, thanks for changing it!
Zoë
Zoë12mo ago
Hmm, I don’t know. I’m in bed right now so I can’t really investigate
Bawdy Ink Slinger
of course. I forgot it was there
Zoë
Zoë12mo ago
Ok that's really weird, everything I'm throwing at it now works as if updates happen immediately but I have absolutely come across issues with wanting to access something that was just added and being unable to do so. I don't know if it is old depreciated behaviour or not I looked up some old projects that have notes in them to say that it won't work without a setTimeout and I removed it and it works without it What I said was true but seems to not be true any more and it does make things simpler as a result So far I haven't been able to throw anything at it in any browser I have access to for changes to be delayed I am going to thank you for giving me the opportunity to question how this all works. Projects I've done recently haven't use setTimeout with 0 delay for DOM manipulation and I didn't notice it, now I'm aware of not needing it
Bawdy Ink Slinger
Ok that's really weird, everything I'm throwing at it now works as if updates happen immediately but I have absolutely come across issues with wanting to access something that was just added and being unable to do so. I don't know if it is old depreciated behaviour or not
Is there a chance that one thread was mutating and another was accessing?
Zoë
Zoë12mo ago
I'm just talking plain JavaScript, so all single threaded
Bawdy Ink Slinger
I don't know the correct terminology, but I meant, "Is the mutating/accessing in separate async code?"
Zoë
Zoë11mo ago
It should be sync, it's just that the order has changed
Want results from more Discord servers?
Add your server