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

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

mutation-observers google-chrome-extension javascript

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 年前

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);
  }
});

推荐文章

cheese-berry · Chrome扩展:点击后弹出图像更改

2 年前

Freelancer · 无cookie嵌入YouTube视频的内容脚本

6 年前

Hamdi Alp · 镀铬。存储同步设置和获取失败

6 年前

trebleCode · Google Chrome扩展-JSON格式错误

6 年前

Foobar · Web扩展-文档。getElementById在执行异步方法之前返回null

6 年前

Wyatt Arent · 在哪里接受订阅付款?

6 年前

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

6 年前

nico_lrx · Chrome扩展,获取selectionText周围的文字

6 年前

Mahendra · 如何注销chrome。标识oauth2.0令牌[重复]

7 年前

Bobby Mor · 无法使用selenium Java或JavascriptExecutor发送密钥/单击

7 年前