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

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

mutation-observers google-chrome-extension javascript

oban_internet · 技术社区 · 8 年前

我正在使用突变观察者从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 回复 | 直到 8 年前

Sebastian Simon SamB 8 年前

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

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

推荐文章

rozsazoltan · 直接从URL创建Manifest v3 URL重定向

1 年前

Skyyade · 如何在Chrome扩展程序中导入html2canvas

1 年前

Kwang Sing · 在chrome扩展中为请求添加前缀的正确设置是什么?

1 年前

DamilolaOwonibi · 我的background.js无法识别正在打开的选项卡

2 年前

ThePenguin · Chrome重复控制台条目

2 年前

SwiftyQA · 在随机持续时间内点击Chrome扩展的按钮

2 年前

J.C · 你是如何使用Chrome扩展程序在一个月内更改网站的CSS的?

2 年前

Teepeemm · Chrome扩展程序如何触发Angular文件上传

2 年前

OrionGL · 本应自动更新的范围输入在手动设置后停止更新

2 年前

Grasper · replaceAll函数禁用某些站点元素

2 年前