The original question was: "Vanilla javaScript DOM queries. How to make sure async code has pleted in front-end before continuing?"

but I changed the title, so that it would be more useful to search queries, and show what info is actually being given in the answer.

You'll notice that, based on the code that I provided, I thought that DOM manipulations were asynchronous. The answers pointed out that it is not.

If code like this is asynchronous:

let elements = document.querySelectorAll('div');

Then, how do you make sure that all of the 'div' elements have been stored to the variable 'elements' before looping over them?

let elements = document.querySelectorAll('div');
//how do you know that all of the elements will 
//have been retrieved in time to run this for loop:
for(let i = 0 ; i < elements.length ; i++) {    
    let div = elements[i];    console.log(div);   
}

The original question was: "Vanilla javaScript DOM queries. How to make sure async code has pleted in front-end before continuing?"

but I changed the title, so that it would be more useful to search queries, and show what info is actually being given in the answer.

You'll notice that, based on the code that I provided, I thought that DOM manipulations were asynchronous. The answers pointed out that it is not.

If code like this is asynchronous:

let elements = document.querySelectorAll('div');

Then, how do you make sure that all of the 'div' elements have been stored to the variable 'elements' before looping over them?

let elements = document.querySelectorAll('div');
//how do you know that all of the elements will 
//have been retrieved in time to run this for loop:
for(let i = 0 ; i < elements.length ; i++) {    
    let div = elements[i];    console.log(div);   
}

• javascript
• asynchronous
• dom
• synchronous

• 1 It's not asynchronous. – Andrew Li Commented Feb 8, 2018 at 21:11
• 1 It isn't async, so no problem. Do you mean if the elements haven't loaded yet? – user9274775 Commented Feb 8, 2018 at 21:11
• 1 not seeing the issue here... please read some js reference before asking here for help. querySelectorAll is not async... – Pierre Commented Feb 8, 2018 at 21:12
• 2 @Pierre does some documentation out there specifically state whether querySelectorAll is async or not? Do you have a link? – Andrew L Commented Feb 8, 2018 at 21:14
• 2 You're getting lots of help here. Ignore "votes". The information is what counts. Being quickly responsive to ments and answers (as you have been) will afford you the best chance at getting personalized help. – user9274775 Commented Feb 8, 2018 at 22:31

2 Answers 2

If code like this is asynchronous

It isn't querySelectorAll is not an asynchronous function.

how do you make sure that all of the 'div' elements have been stored to the variable

Do nothing.

The only reason you might need to wait is if a previous function was asynchronously adding content to the DOM, in which case you would have to wait for that function to finish.

I think good teachers spot what the misunderstanding is and clarify it, instead of reflexively down-voting beginner-level questions.

I previously thought that because the DOM was a separate interface (ie vanilla js interacting with the browser), that reading and writing to it was similar to reading and writing to a database; and the errors in my code seemed to fit into this paradigm.

Actually, the JS scripts are being executed in the same environment that the DOM lives in, so it is not asynchronous. Asynchronous events are events that generally get sent to another environment, and then return by lining up in the event loop.

Easy to understand definition of "asynchronous event"?

https://eloquentjavascript/11_async.html