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

Question

当一条新的聊天消息出现在 tampermonkey 脚本中的 YouTube 直播流中时，我正在尝试做一些事情。

我在 div 上使用 ID "chat-messages"

上的 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 和 class 添加到元素。 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);
  }
});

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

Why is the id of an element undefined when properly shown in console using DOMNodeInserted?

javascript

youtube

tampermonkey