Javascript 突變觀察者尋址一個元素<li></li>

Question

我使用突變觀察器來觀察<ul>元素發生的變化。 觀察時，我得到以下 output：

<li class="rt__body-row full flex gc-07 rt__body-row--odd">
<span class="rt__row-left short">48,359.50</span>
<span class="rt__row-center">0.063</span>
<span class="rt__row-right">01:57:44</span>
</li>

現在我想寫一個關於第二個跨度文本（0.063）的 if 語句。 如何解決 javascript 中的第二個跨度？ 我對編程很陌生，下面是我的代碼：

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

window.setTimeout(obser1, 1700);

下面是我的清單文件：

  "name": "Bybit orderbook color",
  "version": "1.1",
  "manifest_version": 2,

  "content_scripts": [
    {
      "matches": [ "https://www.bybit.com/trade/usdt/BTCUSDT" ],
      "css": [ "Style.css" ],
      "run_at": "document_idle",
      "js": [ "background.js" ]

    }

  ],

  "permissions": [ "activeTab" ]


}

Answer 1

假設 mutation. addedNodes[0] 是一個 html 集合，你可以這樣做

const vals = [...mutation.addedNodes[0].querySelectorAll("span")].map(span => span.textContent);

如果你可以做一個字符串

const fragment = document.createElement("div");
fragment.innerHMTL = mutation.addedNodes[0];
const vals = [...fragment.querySelectorAll("span")].map(span => span.textContent);