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
Jochem15mo 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ë15mo 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
Bawdy Ink SlingerOP15mo ago
@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
Jochem15mo ago
No worries, thanks for changing it!
Zoë
Zoë15mo ago
Hmm, I don’t know. I’m in bed right now so I can’t really investigate
Bawdy Ink Slinger
Bawdy Ink SlingerOP15mo ago
of course. I forgot it was there
Zoë
Zoë15mo 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
Bawdy Ink SlingerOP15mo 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
Is there a chance that one thread was mutating and another was accessing?
Zoë
Zoë15mo ago
I'm just talking plain JavaScript, so all single threaded
Bawdy Ink Slinger
Bawdy Ink SlingerOP15mo ago
I don't know the correct terminology, but I meant, "Is the mutating/accessing in separate async code?"
Zoë
Zoë15mo ago
It should be sync, it's just that the order has changed
Want results from more Discord servers?
Add your server