JavaScript ループが完了したら実行するには

Question

前提・実現したいこと

ループが完了したら、
document.querySelector('.aaaa').style.background='blue'を実行したいです

現状ループが終わるのを見越して1秒後に実行(setTimeout)としますが、
setTimeoutを使わずループが終わったことを判定し、document.querySelector('.aaaa').style.background='blue'を実行したいです
どうすればいいでしょうか

該当のソースコード

<script>
window.onload=function(){
Array.from(document.querySelectorAll('.aaaa'), item => {
item.style.backgroundColor="red";
});
setTimeout("document.querySelector('.aaaa').style.background='blue'",1000);
}
</script>

<div class="aaaa">1</div>
<div class="aaaa">2</div>
<div class="aaaa">3</div>

Comments

[BeatStar]

インデント( Tabキーや半角スペースでやるアレ ) ぐらいは入れた方がいいですよ。
場合によっては相当読みづらくなるので。

Answer 1

どうすればいいでしょうか

特に非同期動作はないので、そのまま書けばいいです。

window.onload=function(){
Array.from(document.querySelectorAll('.aaaa'), item => {
item.style.backgroundColor="red";
});
document.querySelectorAll('.aaaa').style.background='red';
}

…と書いていて気づいたのですが、そもそもdocument.querySelectorAll('.aaaa')は配列のようなものを返しますので、document.querySelectorAll('.aaaa').styleとつなげること自体が成立しません。

Comments

[qwerp]

すみません、ミスしました

単純にループ処理が終わらなけれは他のコードが実行されないから、
<script>
window.onload=function(){
Array.from(document.querySelectorAll('.aaaa'), item => {
item.style.backgroundColor="red";
});
document.querySelector('.aaaa').style.background='blue';
}
</script>

<div class="aaaa">1</div>
<div class="aaaa">2</div>
<div class="aaaa">3</div>
これでいいんでしょうか

[maisumakun]

ループが完了した後にそもそも何をしたいのか、コードの状況を踏まえても把握できない状況です。

[maisumakun]

> これでいいんでしょうか

はい。