Применить стиль с помощью setTimeout()

Самый простой способ — создать отдельные таймеры, сделав каждое ожидание на 2000 мс длиннее предыдущего, умножив его на индекс цикла:

var dot = document.querySelectorAll('.dot');
for (let i=0;i<dot.length;i++) { // ***
    setTimeout(function () {
        dot[i].style.backgroundColor = 'blue';
    }, i * 2000);
}

Обратите также внимание на использование let вместо var в цикле, так что каждая итерация цикла получает свою собственную копию i. Если вы не можете использовать функции ES2015, см. ответы на этот вопрос, чтобы узнать, как работать с i в цикле for.

Если мы используем ES2015, мы можем вместо этого использовать цикл for-of:

let i = 0;
for (const dot of document.querySelectorAll('.dot')) {
    setTimeout(() => {
        dot.style.backgroundColor = 'blue';
    }, i++ * 2000);
}

Это зависит от того, что NodeList из querySelectorAll можно повторять, как в современных браузерах. Я не знаю, есть ли какие-либо браузеры с ES2015, но которые (пока) не делают NodeList итерируемым; если они есть, вы можете использовать техника этого ответа для добавления итерируемости.

Поместите setTimeout внутри цикла for и умножьте i на 2000, чтобы установить другой интервал.

var dot = document.querySelectorAll('.dot');
for (let i = 0; i < dot.length; i++) {
  setTimeout(function() {
    dot[i].style.backgroundColor = 'blue';
  }, i * 2000);

}

.container {
  display: flex;
  justify-content: space-around;
}

.dot {
  background-color: red;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

<div class = "container">
  <div class = "dot"></div>
  <div class = "dot"></div>
  <div class = "dot"></div>
</div>

  var i = 0;
  var dot = document.querySelectorAll('.dot');
  var interval = setInterval(function () {
    dot[i].style.backgroundColor = 'blue';
    i++;
    if (i >= dot.length) clearInterval(interval);
  },2000);

Вы можете попробовать использовать длинный путь: ``` setTimeout (функция () { var dot = document.querySelectorAll('.dot');

    setTimeout(function () {
        for (var i=0;i<dot.length;i++) {
        dot[0].style.backgroundColor = 'blue';
        }

        setTimeout(function () {
            for (var i=0;i<dot.length;i++) {
            dot[1].style.backgroundColor = 'blue';
            }
        },2000);

    },2000);
},2000);    
</script>```

Но я бы предложил (i * 2000)

Попробуйте использовать setInterval, кажется, он идеально подходит для вашего случая.

    var dotNumber = 0;
    var myVar = setInterval(() => {
        var dot = document.querySelectorAll('.dot');
        dot[dotNumber].style.backgroundColor = 'blue';

        dotNumber +=1; 

        if (dotNumber >= dot.length){
           clearInterval(myVar);
        }  
     }, 2000);