Как при появлении элемента с определенным содержанием что-нибудь выполнить?

Question

[Anonymous]

Всем привет.

У меня на странице есть такой блок : <div class="coolUpdates"></div>. По скрипту в этом блоке (не важно, стоит у него display: block; или display: none;) появляются другие блоки с одинаковыми классами, но в них отличается одно - текст. Например :

<div class="coolUpdates">
    // Начинаются появляться элементы
    <div class="omgUpdate">Обновление : добавили белый цвет</div>
    // Через некоторое время добавился еще один элемент
    <div class="omgUpdate">Обновление : добавили черный цвет</div>
</div>

Так вот, как мне сделать так, что при появлении <div class="omgUpdate"> содержащим текст Обновление : добавили черный цвет я смог бы выполнить какие-нибудь действия : например, вызвать alert('Обновление с черным цветом уже вышло!')?

Comments

[Сергей Сергей]

https://qna.habr.com/q/1148744

Answer 1

[Сергей Соколов]

можно использовать mutationObserver() – наблюдатель, который будет следить за изменением списка дочерних элементов и что-то выполнять при любом обновлении.

const el = document.querySelector('.coolUpdates');

const observer = new MutationObserver(list => {
  list.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      if (node.textContent === 'Обновление : добавили черный цвет') {
        console.log('Оп! Момент настал!');
      }
    })
  });
});

observer.observe(el, { childList: true });

Comments

[Anonymous]

Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'. Что делать?

[Сергей Соколов]

Sunlan4ch, на момент выполнения ещё нет элемента <div class="coolUpdates">

[Anonymous]

Сергей Соколов, А как тогда сделать в таком случае? Чтобы после появления сработало

[Сергей Соколов]

Sunlan4ch, ну так же, только вложенно ) Значит, надо слушать изменения родителького для div.coolUpdates элемента. Разобраться, как слушать изменения не только непосредственных дочерних элементов, а во всём под-дереве – опция subtree: true. Читать документацию, понимать, пробовать простые изолированные тесты делать.

[Anonymous]

Сергей Соколов, А может быть такое, что это все из-за того, что блок находится в display: none; ?

[Сергей Соколов]

Sunlan4ch, нет. Тест: https://codepen.io/sergiks/pen/dydMXvb

[Anonymous]

Сергей Соколов, Хм.. Странно, так то решение работает если я вместо своего класса просто поставлю body, но с моим классом так не работает. Хотя внутри элемент изменяется