javascript document.getElementsByClassName returns 0 for length

I have the below function:

    function _dtmIsAppDeclined(){
        var appDeclined = 0;
         //May have to move this into lower if statement 
        if((document.cookie.indexOf('startStandardOaoFlow=') !== -1)){
            s.events += (s.events == '') ? "event33" : ",event33";
        }
  
        var myCollection = document.getElementsByClassName('region-done-group');
        var i = myCollection.length;
        console.log("myCollection.length: " + i + " <---===> OAO4 myCollection holds: ",myCollection);
        while(i--) {
            if (myCollection[i].innerText.search('we cannot open the account') > -1) {
              console.log("5 ---===> OAO4 FOUND DECLINE TEXT");
            appDeclined = 1;
            s.events += (s.events == '') ? "event35" : ",event35";
            s.eVar23 ='decline';
            // Invoke marketing tags
            _dtmInsertStaticTags(sTags3);
            }
        }
        return appDeclined;
    };

Select allOpen in new window

The issue is that

var myCollection = document.getElementsByClassName('region-done-group');

Select allOpen in new window

Returns a length of 0 (see line 10 in the code) but still out puts the collection? I read that it is most likely because the getElementsByClassName returns a live collection. the length property of the object is 0 because at that point of time there is no element with that className in the DOM. ***Maybe 1 out 10 times when refreshing the page, the code works as expected*** How do I ensure that the classname is in the DOM before I do anything else? One caveat is this is a Single Page Application but it does have the ability for the user to refresh the page. This image shows the console log from line 10 above: Thanks!