javascript - 为什么使用 DOMNodeInserted 在控制台中正确显示元素的 id 时未定义？

Question

当一条新的聊天消息出现在 tampermonkey 脚本中的 YouTube 直播流上时，我正在尝试执行某些操作。

我在 ID 为“chat-messages”的 div 上使用 DOMNodeInserted 事件

问题是:我无法获取元素的 id(未定义)，但它已正确打印在控制台中。使用 jquery 也不可能获取 class 属性。

代码:

$("#chat-messages").on('DOMNodeInserted', function(e) {

  var VanillaElement = e.target;
  var JqueryElement = $(VanillaElement);


  if(JqueryElement.is("yt-live-chat-text-message-renderer")){

    console.log("added chat message");
    console.log(VanillaElement);
    console.log(VanillaElement.id);
    console.log(JqueryElement.attr("class"));

  }



});

以下是为了更好地理解的屏幕截图:

Answer 1

您的代码在 ID 和类添加到元素之前运行。 YouTube 代码必须先插入元素，然后添加属性，以便您的代码在其间运行。请参阅Is Chrome's JavaScript console lazy about evaluating arrays?这就是为什么您在登录 VanillaElement 时看到属性的原因。

最好的解决方案是不使用id，只需保存VanillaElement和jqueryElement以供以后使用。如果您想查看 ID，可以在显示之前添加延迟。

$("#chat-messages").on('DOMNodeInserted', function(e) {
  var VanillaElement = e.target;
  var JqueryElement = $(VanillaElement);
  if (JqueryElement.is("yt-live-chat-text-message-renderer")) {
    console.log("added chat message");
    console.log(VanillaElement);
    setTimeout(function() {
      console.log(VanillaElement.id);
      console.log(JqueryElement.attr("class"));
    }, 100);
  }
});