Как достучаться до элемента сгенерированным JS?

Question

[Vasya-prijevalskij]

Всем привет.
Подключил Lottie-анимацию на сайт, которая срабатывает при скролле. Вот код:

const theWindow = $(window),
            theDocument = $(document),
            docHeight = theDocument.height(),
            animDuration = docHeight,
            animData = {
                container: document.getElementById('lottie-anim'),
                renderer: 'svg',
                loop: false,
                autoplay: false,
                path: './assets/js/anim.json'
        };

        const anim = bodymovin.loadAnimation(animData);
            $( window ).scroll(function() {
                animatebodymovin(animDuration, anim);
            });

            function animatebodymovin(duration, animObject) {
                const scrollPosition = theWindow.scrollTop(),
                    maxFrames = animObject.totalFrames;
                    
                    frame = (maxFrames / 90) * (scrollPosition / (duration / 100));
                    animObject.goToAndStop(frame, true);
            }

Как видно из кода, скрипт находит на странице div с айди lottie-anim, рендерит svg файл и добавляет его в DOOM-дерево. Ну и при скролле подменяет кадры, создавая этим движение.

Так вот, подскажите, плз, как мне достучаться до этой самой SVGшки, которая рендерится скриптом. Заглянув в Девтулс, видно, что SVG эта идет первым в своем родителе.
Пытался до нее достучаться так, но получил Null. :

window.onload = function() {
                console.log(animData.container.firstElementChild)
            };

Есть какие-нибудь советы, как мне решить мою проблему?

Comments

[Антон]

В тех же DevTools во вкладке Elements правой кнопкой кликаете по элементу и там Copy -> Copy JS Path - у вас в буфере окажется js-код для выбора элемента.
По поводу того, что у вас null получается, может к моменту выполнения этого кода элемента ещё нет в dom-дереве.

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

async function waitForElement( selector, timeout = 5000, interval = 100 ) {
  return new Promise( ( resolve, reject ) => {
    check( resolve, reject, timeout )
  } );
  function check( res, rej, to ) {
    if( to < 0 ) {
      rej();
      return;
    }
    const el = document.querySelector( selector );
    if( el ) {
      res( el );
      return;
    }
    setTimeout( check, interval, res, rej, to - interval );
  }
}

[Vasya-prijevalskij]

Сергей Сергей, А обычная колбэк функция подойдет для этого, как думаете?

[Vasya-prijevalskij]

Антон, да, совершенно верно. Null потому что загрузиться дерево не успело. Поставил таймаут пару сек, достучался )

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

как-то так.

(function f( s ) {
  const se = document.querySelector( s );
  if( se ) {
    // anim все дела
  }else{
    setTimeout( f, 500, s );
  }
})('#lottie-anim');

[Vasya-prijevalskij]

Сергей Сергей, Спасибо)
я почти также и сделал