I'm pretty new to programming. I'm using a mutation observer to observe changes to an element. below is what i get in my console after observing a <ul> element.

<li class="rt__body-row full flex gc-07">
<span class="rt__row-left short">50,660.50</span>
<span class="rt__row-center">0.001</span>
<span class="rt__row-right">14:18:19</span>
</li>

and

<li class="rt__body-row full flex gc-07 rt__body-row--odd">
<span class="rt__row-left short">50,660.50</span>
<span class="icon iconfont icon-arrow"></span>
<span class="rt__row-center">0.002</span>
<span class="rt__row-right">14:18:19</span>
</li>

as you can see it gives me two different <li>s and i need to manipulate the spans based on the <li> class. below is my JS code:

function obser1() {
    const trades = document.querySelector('.scrollbar-dark');
    const observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
            if (mutation.addedNodes.length) {
                const vals = [...mutation.addedNodes[0].querySelectorAll("span")].map(span => span.textContent);
                console.log(mutation.addedNodes[0]);
                console.log(vals);
            }
        })
    });
    console.log("obs1");
    observer.observe(trades, {
        childList: true,
        subtree: true,
        attributes: true,
        characterData: true
    })
    console.log("observed");
}

window.setTimeout(obser1, 1700);

I have tried the following:

var lines = [...mutation.addedNodes[0].querySelectorAll("li")];
 if (lines.classList.contains("rt__body-row--odd")){
   console.log("odd");
  }

but its not working.