JavaScript правильно ли я написал ожидание появления класса?

Question

Имеется два скрипта:

Скрипт №1 - ожидает появления класса .cdn_download_item на странице, после выходит отклик что "класс обнаружен".

Скрипт №2 - этот скрипт необходимо использовать только после появления класса .cdn_download_item, т.к. он перебирает span-ы этого класса и выводит их.

Вопрос - как мне совместить эти скрипты, чтобы запустить один скрипт одним разом и получить результат?

Скрипт №1

document.addEventListener('DOMNodeInserted', function(event){
    if(document.querySelectorAll('.cdn_download_item'))
    {
        console.log('класс обнаружен');
    }
    else
    {
        console.log('не удалось обнаружить класс');
    }
}, true);

Скрипт №2

var elements = Array.from(document.querySelectorAll('.cdn_download_item span:first-child'));
var linksArray = new Array();
for (element of elements) {
    linksArray.push(element.innerText);
}
linksArray;

Мне нужно что то вроде этого (см.ниже)

document.addEventListener('DOMNodeInserted', function(event){
    if(document.querySelectorAll('.cdn_download_item'))
    {
        var elements = Array.from(document.querySelectorAll('.cdn_download_item span:first-child'));
        var linksArray = new Array();
        for (element of elements) 
        {
            linksArray.push(element.innerText);
        }
        linksArray;
    }
    else
    {
        //если класс еще не обнаружен, тогда ожидаем появления класса
    }
}, true);

Дополнение: Вот этот код почти работает так как мне нужно, Всего элементы в массиве должно быть (76), сейчас выходит результат 76 раз, с 76 элементами

document.addEventListener('DOMNodeInserted', function(event){
    const result = new Promise ((resolve,reject)=>
    { 
        if(document.querySelectorAll('.cdn_download_item'))
        {
            resolve("Успех")
        }
        else
        {
            reject("Ошибка")
        }
    });
    result 
    .then(()=>
    {
        if(document.querySelectorAll('.cdn_download_item span:first-child'))
        {
            var elements = Array.from(document.querySelectorAll('.cdn_download_item span:first-child'));
            var linksArray = new Array();
             for (element of elements) 
             {
              linksArray.push(element.innerText);
             }
             linksArray;
        }
        console.log(linksArray);
    })

    .catch(()=>
    {
        console.log('что то в catch');
    })
}, true);

Answer 1

Простой пример:

document.addEventListener('DOMNodeInserted', (e) => {
  if (!e.target.classList.contains('cdn_download_item')) return;

  console.log('Inserted', event.target);
});

const div = () => {
  const downloadItem = document.createElement('div');
  downloadItem.innerText = 'Download item';
  downloadItem.className = 'cdn_download_item';
  return downloadItem;
}

setTimeout(() => {document.body.appendChild(div())}, Math.random() * 4000);
setTimeout(() => {document.body.appendChild(div())}, Math.random() * 4000);
setTimeout(() => {document.body.appendChild(div())}, Math.random() * 4000);
setTimeout(() => {document.body.appendChild(div())}, Math.random() * 4000);

БЛОГ НА HUSL

JavaScript правильно ли я написал ожидание появления класса?

Ответы (1 шт):