javascript - 評価用に javascript を含む setAttribute

Question

要素の属性を設定しようとしています。

要素はクラス (アクティブ) から取得され、変数が割り当てられます。同じ要素が別のクラス (topArrow) から取得され、変数が割り当てられます。

2 つの変数を比較して if ステートメントを実行すると、同じではないと評価されます...???

console.log 何が起こっているかを確認すると、次のようになります。

HTMLCollection[img.active images/a.../top.png]
HTMLCollection[]

topArrow のクラスを持たない要素では、次のようになります。

HTMLCollection[img.active images/a...left.png]
HTMLCollection[img.topArrow images/a.../top.png]

---

    var arrow = 0;

var topArrow = document.getElementsByClassName("topArrow");
var menuText = document.getElementsByClassName("menuText");
var rightArrow = document.getElementsByClassName("rightArrow");
var bottomArrow = document.getElementsByClassName("bottomArrow");
var leftArrow = document.getElementsByClassName("leftArrow");

//assign navButtons to var buttons (creates array)
var buttons = document.getElementsByClassName("navButton");

//for each instance of buttons, assign class "active" onmouseover
for(var i = 0; i < buttons.length; ++i){
    buttons[i].onmouseover = function() {
        this.className = "active";
        var arrow = document.getElementsByClassName("active");
        console.log(arrow);
        console.log(topArrow);
        changeImages();
    }
}

//for each instance of buttons, remove class "active" onmouseout
for(var i = 0; i < buttons.length; ++i){
    buttons[i].onmouseout = function () {
        this.className = "";
    };
}

function changeImages(){
    if ( arrow == topArrow ) {
        this.setAttribute("src", "images/arrows/top_o.png");
        console.log("arrow should change");
    } else {
        console.log("arrow should not change");
    }
}