Почему идентификатор элемента не определен, когда он правильно отображается в консоли с помощью DOMNodeInserted? - PullRequest
Новая
       8

Почему идентификатор элемента не определен, когда он правильно отображается в консоли с помощью DOMNodeInserted?

0 голосов
/ 25 марта 2020

Я пытаюсь что-то сделать, когда новое сообщение чата появляется в прямом эфире YouTube в сценарии tampermonkey.

Я использую событие DOMNodeInserted в div с идентификатором "chat-messages"

Проблема в том, что я не могу получить идентификатор элемента (не определено), но он выводится правильно в консоли. Также невозможно получить атрибут класса, используя jquery.

Код: 

$("#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"));

  }



});

Вот скриншот для лучшего понимания:

output

1 Ответ

1 голос
/ 25 марта 2020

Ваш код выполняется до того, как ID и класс добавлены к элементу. Код YouTube должен вставлять элемент, а затем добавлять атрибуты, чтобы ваш код работал между ними. См. Неужели консоль Chrome JavaScript ленится при оценке массивов? , потому что вы видите атрибуты при входе в систему VanillaElement.

Лучшее решение - не использовать id Просто сохраните VanillaElement и jqueryElement для дальнейшего использования. Если вы хотите увидеть идентификатор, вы можете добавить задержку перед его отображением. 

$("#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);
  }
});
...