问如何访问Javascript数组中的元素(div ClassNames)，并更改它们的不透明度？

EN

var tempNodeList = document.getElementsByClassName("grids");

tempNodeList[b].style.opacity = 0

allBoxes[1].style.opacity

box01.addEventListener("mouseenter", fadeOutBoxes);

var thisBox = e.target.id;

var grid = thisBox.slice(0, 4);
var tempBoxNum = thisBox.slice(4);
var boxNum = ("0" + tempBoxNum).slice(-2);
var gridBoxNum = grid.concat(boxNum);

console.log("grid = " + grid);
console.log("tempBoxNum = " + tempBoxNum);
console.log("boxNum = " + boxNum);
console.log("gridBoxNum = " + gridBoxNum);

///// for in enumerative testing //////////////////////
var tempNodeList = document.getElementsByClassName("grids"); /// THIS CREATES AN HTML COLLECTION-NOT AN ARRAY
console.log(tempNodeList.valueOf()); //for testing - just lists out the array elements
var allBoxes = Array.from(tempNodeList); /// CONVERT THE HTML COLLECTION TO AN ARRAY
    console.log(allBoxes);

for (var b in allBoxes) {
    console.log(allBoxes[b].id);

        //if (allBoxes[b].id === "grid01") { // works with specified name
        if (allBoxes[b].id === gridBoxNum) { // trying with programmatically generated name


            //remove THIS BOX from array
            allBoxes.splice(b, 1);
        }

    ////// run fades on the newly trimmed array of gridBoxes
    var op = 1; // intial opacity
    var timer = setInterval(function () {
    if (op <= 0.1){
        clearInterval(timer);   
    }
    //e.target.style.opacity = op; // HOLD - original opacity fade command
    //console.log("e.target.style.opacity: " + e.target);
    //allBoxes[1].style.opacity = op;
    op -= op * 0.1;
    }, 20);
}