

document.getElementsByClassNameで特定のclassを取得して、forEachでループさせる際に、2つあるはずの要素が1つしかカウントされません。

consoleで確認すると、下記値が返ってきます。  
MODAL.methods.show() = length: 2  
MODAL.methods.overlay() = length: 2  
MODAL.methods.close() = length: 1

querySelectorAllで対応すると解決するのですが、getElementsByClassNameだとうまくいかない理由が分かりません…

原因がわかる方いらっしゃいましたら教えていただきたいです<(_ _)>

[code]

    MODAL.methods = {
        show: function(elm){
            var $self = elm;
            var $next = $self.nextElementSibling;
            if($next.classList.contains(MODAL.tar) && !$self.classList.contains(MODAL.active)) {
                $self.classList.add(MODAL.active);
                $next.classList.add(MODAL.active);
    
                $next.style.display = 'block';
    
                console.log(document.getElementsByClassName(MODAL.active));
    
                MODAL.methods.overlay();
            }
        },
        close: function(){
            var $close = document.getElementById(MODAL.close);
            console.log(document.getElementsByClassName(MODAL.active));
            Array.prototype.forEach.call(document.getElementsByClassName(MODAL.active), function(elm){
                elm.classList.remove(MODAL.active);
                if(elm.classList.contains(MODAL.tar)){
                    elm.style.display = 'none';
                }
            });
            $close.remove();
        },
        overlay: function(){
            console.log(document.getElementsByClassName(MODAL.active));
            document.body.insertAdjacentHTML('beforeend', '<div id="' + MODAL.close + '" class="modal-overlay" onClick="MODAL.methods.close();"><span class="modal-overlay_child">close</span></div>');
        }
    };
    
[/code]


CC BY-SA 4.0
2018-07-31T05:29:04.083
47120
2018-07-31T11:16:41.547
29531
question
javascript html css
document.getElementsByClassNameで取得する値について


「HTMLCollection」が動的にclassを参照していることが原因でした。  
getElementsByClassNameだとHTMLCollectionを返してしまうので、  
静的なNodeListを返してくれる「querySelectorAll」に変更することで解決しました！

Qitaにメモ残しています。  
<https://qiita.com/o-sushi/items/929f9bbf46d4f61819ac>


CC BY-SA 4.0
2018-07-31T11:16:41.547
47134
2018-07-31T11:16:41.547
29531
47120
answer