Получение DOM элемента, который подгружается с помощью JavaScript кода в div?

Question

[roma3928]

Пытаюсь получить доступ к элементам с помощью document.querySelector, но возвращается null. menuFull возвращает как нужно, а в случае с aside загружается null. По идее в момент load все DOM элементы должны загрузиться, а в итоге запрос не видит нужного элемента. Код находится в Tilde. Ссылка на сайт: https://paniniufa.su/menu?category=10f47e90-a4de-4...

<script src="https://api.selcdn.ru/v1/SEL_75070/ucsdelivery/ce939b6c611d47a190a65054c8492733/MenuFull.prod.common.js"></script>
<script src="https://api.selcdn.ru/v1/SEL_75070/ucsdelivery/ce939b6c611d47a190a65054c8492733/MenuFull.prod.umd.min.js"></script>

<link rel="stylesheet" href="https://854102.selcdn.ru/links/MenuFull.prod09032210.css">

<div id="menu-full"></div>

<script>
    MenuFull.create('#menu-full', {
        token: accessToken,
        baseUrl: apiBaseUrl
    })
</script>

<script>
window.onload = function() {
const basketTitle = document.querySelector('.basket-mobile__text[data-v-32ac8623]');
basketTitle.textContent = "Корзина";
}
</script>

<script>
    window.onload = function() {
        const menuFull = document.querySelector('#menu-full');
        console.log(menuFull);

        let aside = menuFull.querySelector("aside")
        console.log(aside);
    }
</script>

Comments

[ProjectSoft]

Странно...
В каком месте?

Скрин

[roma3928]

ProjectSoft, Вот оно подгружает тег h3, а должен section

[roma3928]

roma3928, изменил код на

window.onload = function() {
        const menuFull = document.querySelector('#menu-full');
        console.log(menuFull);
   
    for (let elem of menuFull.children) {
     console.log(elem)
    }
    }

[roma3928]

ProjectSoft, в коллекции детей menuFull стоит h3 с классом loading, что странно, ведь функция события load.

[ProjectSoft]

roma3928, не делайте так

window.onload = function() {
/* код */
}

По идее вы переопределяете функцию.
Делайте по нормальному

window.addEventListener('load', function(e) {
/**
** Ваш код 
**/
});

Вот так вы добавляете очередь функций на событие.

PS: Я так и не понял вашей проблемы. Вы получаете то, что хотите.

[roma3928]

ProjectSoft, Проблема в том, что мне нужно достучаться до тега section, который находится в div#menu-full, но если получать его через document.querySelector, то получаем null. Я получаю const menuFull = document.querySelector(#menu-full) и он выводит все нормально и далее у элемента menuFull вывожу коллекцию children в ней по идее должно быть 2 элемента section с классом menu и div vue-notification-group, но выводит он h3 и div vue-notification-group

[roma3928]

roma3928, выше кинул скрин вывода, у коллекции menuFull.children по какой-то причине первым элементом является h3 с классом loading

[ProjectSoft]

roma3928, теперь понял.
Проблема в том, что onload ждёт загрузки всей страницы, которая объявлена в тегах страницы. Изображения, скрипты, стили... Но он ничего не знает о асинхронных запросах в вашем js скрипте к примеру.
Если вы хотите получить детей вашего блока, то нужно получать его в калбеке функции вашего асинхронного запроса (или/иначе/скореевсего в Promise вашего запроса)

[roma3928]

ProjectSoft, понял, спасибо. Написал промис , но он, к сожалению, не работает

function loadScript() {
  return new Promise(function(resolve) {
    let script = document.querySelector('#menu-script');

    script.onload = () => resolve(script);
  });
}

    let promise = loadScript();

    promise.then( () => {
     const menuFull = document.querySelector('#menu-full');
     console.log(menuFull);

    for (let elem of menuFull.children) {
        console.log(elem)
    }
    
    });

[ProjectSoft]

roma3928, нет. вы не поняли...
У вас уже есть промис, который загружает данные в ваш блок. Вот в нём нужно ловить ваших детей блока.
Дополнительные промисы вам никак не помогут))).
Я понимаю, откуда растут ноги, поэтому и не люблю, и даже ненавижу конструкторы. Если попадает сайт из данных конструкторов, я забираю только вёрстку... Остальную логику беру на себя.

[roma3928]

ProjectSoft, сейчас понял, спасибо большое! проблема только в том, что нет доступа к коду, который загружает данные в блок. Впервые взялся за работу с конструктором, не думал, что так муторно будет(

[Максим]

roma3928, попробуйте живую коллекцию, ни querySelectorAll а по getElememtsByClassName

[roma3928]

Максим, спасибо большое! действительно, живая коллекция решение данной проблемы!

[roma3928]

Максим, поторопился, при обращении getElememtsByClassName мы действительно получим коллекцию внутри которой будет aside, но если написать как ниже, то в console.log(menuFull[0]); выведет undefined

window.onload = function() {
    const menuFull = document.getElementsByClassName("menu__categories");
    console.log(menuFull);
    console.log(menuFull[0]);
    }

[Максим]

roma3928, а class есть такой какой вы ищите?
Я отвечу только утром...в общем надо получить живую коллекцию, не NodeList

[roma3928]

Максим, да

[roma3928]

roma3928, он получает живую коллекцию, но если запросить нулевой элемент коллекции, то выведет undefined

[Максим]

roma3928, вот и отлично...если пишет что length 1 значит есть ..

[Максим]

roma3928, значит не 0 а 1

[roma3928]

Максим, первый также undefined

[roma3928]

Максим, вот если после загрузки страницы на писать в консоле

console.log(menuFull);
console.log(menuFull[0]);

то он выведет нужный нам aside, но если это делать в редакторе тильды, то undefined

[roma3928]

roma3928, вероятно там действительно суть в том, что js код который помещает в <div id="menu-full"></div> работает ассинхронно и нужно каким-то образом ловить этот элемент в промисе

[Михаил Ливач]

roma3928, решение "в лоб": поставить setInterval() и ловить; как поймали - делать clearInterval()

[Юрий Матрос]

на тильде 90% таких случаев решается setTimeout
ждем когда тильда прогрузит свои скрипты и уже потом ищем свои элементы

[ProjectSoft]

roma3928, поэтому...
У вас сайт на тильде, но вы хотите иметь доступ к АПИ скриптов и т. д.
Моё решение кажется простым, но нужен человек, который умеет работать как с фронтом, так и с беком.
Делаете сайт и импортируете его как обычный html + css + js.
Разворачиваете выбранную вами CMS для магазина и всё это натягиваете на него. Честно говоря, JS можно выкинуть и делать свой (подсматривать можно :) ).
Лично я именно так и делал.
А setInterval, setTimeout - 'это всё костыли ещё из прошлого века и никогда не буду советовать их использовать в данной задаче.

[Виталий Б]

А если слушать через observer ?