代码之家 › 专栏 › 技术社区 › oban_internet

突变观察者-添加的节点[0]最终变得不确定

mutation-observers google-chrome-extension javascript

0

oban_internet · 技术社区 · 6 年前

我正在使用突变观察者从twitch中提取任何聊天信息。电视

var observer = new MutationObserver(function (mutations) {Â Â 
    mutations.forEach(function (mutation) {
        if(mutation.addedNodes[0].classList.contains('chat-line__message')){
            counter++;
            console.log(counter);
        }
    });Â Â 
});Â 

var observerConfig = {Â Â Â Â Â Â Â Â 
    childList: true,
};

它工作正常,直到聊天达到最大消息量(约144条),然后我不断收到:

Uncaught TypeError: Cannot read property 'classList' of undefined

为什么会发生这种情况,我如何克服它?

1 回复 | 直到 6 年前

1

3

Sebastian Simon SamB 6 年前

并非每个突变都会增加节点。听起来有些突变只涉及移除的节点。为了避免此错误,请像往常一样检查是否存在添加的节点:

if(mutation.addedNodes.length && mutation.addedNodes[0].classList.contains('chat-line__message'))

实际上,突变可能会增加多个节点。这是一种更稳健的方法:

mutations.forEach((mutation) => {
  const addedChatLineMessages = Array.from(mutation.addedNodes)
    .filter(({classList}) => classList && classList.contains("chat-line__message"))

  if(addedChatLineMessages.length){
    counter += addedChatLineMessages.length;
    console.log(counter);
  }
});

推荐文章

oban_internet · 突变观察者-添加的节点[0]最终变得不确定

6 年前

David · 突变观察者-获取儿童的所有视频标签

6 年前

Shahdab Aalam Saifi · 如何在节点列表[]上应用querySelectorAll()?

6 年前

crazko · “新”谷歌日历中的MutationObserver

6 年前

kofifus · Chrome MutationObserver在某些元素上未激活

7 年前

microo8 · 如何测试MutationObserver

7 年前