حلقه for مالکیت یا زیر مجموعه بودن المنت ها رو تایین نمیکنه فقط یه حلقست
شما وقتی میگی
for (var i=0; i < d1.length; i++)
از نظر برنامه داری میگی
for (var i=0; i < 1; i++)
هیچ ربطی به اون المنت پدر نداره چون d1.length تبدیل میشه به یک عدد
شما اگه میخای ببری زیمجموع دیو ها بزاری باید سلکتور red رو تغییر بدی من همیشه با jquery کار میکنم و مطمئن نیستم با جاوا اسکریپت خالی سلکتورش چجوری میشه ممکنه اررور سینتکس داشته باشم ولی بیه همچین چیزی باید بشه
var myid1 = document.getElementsByClassName("d1")[0].getElementById("red1");
با جیکوئری هم که این میشه
var myid1 = $('.b1').find('#red1');
اگرم بخای صرفا با کلاس بگیریشون اینجوری میشه
var myid1 = $('.b1').find('div');
ولی خب این یکم باید حواست باشه چون همه div های توی کلاس رو میگیره