Как заменить $('#more').ready(function() { на чистом js?

Question

[Михаил]

Как с помощью js можно заменить код jQuery:

$('#more').ready(function(){
...
}

Важно чтобы код внутри срабатывал после загрузки элемента с определенным id, классом. Но не документа целиком как в примере на js:

window.onload = function() {
...
}

Comments

[Виталий Першин]

Важно чтобы код внутри срабатывал после загрузки элемента с определенным id, классом.

А твой код на jquery и не делает так. ready это событие готовности документа, а не элемента.

[Михаил]

Виталий Першин, Спасибо. Как сделать чтобы код срабатывал после загрузки элемента?

[Виталий Першин]

Михаил, Зависит от того что ты пытаешься сделать, мне кажется ты не в ту сторону копаешь. Можно например через setInterval проверять, не появился ли элемент на странице. Или например через MutationObserver отлавливать изменения dom. Но мне кажется все можно сделать гораздо проще, ведь элемент не появляется сам по себе, значит какое-то событие его вызывает, следовательно, нужно вешаться именно на это событие.

[Михаил]

Виталий Першин,

Этот элемент горизонтальное меню которое появляется при загрузке страницы в шапке сайта меню формируется с помощью php.

Пишу скрипт: В случае если пунктов меню по ширине больше ширины div — скрываем лишние.

Проблема в том что ширина каждого пункта с помощью offsetWidth считается по разному при обновлении страницы f5 или Ctrl+F5 без

window.onload = function() {
или $('#more').ready(function(){

а внутри этих конструкций в обоих случая корректно.

Мне не нужно проверять всю страницу чтобы начать выполнять скрипт, нужно узнать загружен ли div с id #more и если ок то начать выполнение скрипта.

[Виталий Першин]

Проблема в том что ширина каждого пункта с помощью offsetWidth считается по разному при обновлении страницы f5 или Ctrl+F5 без

Оно считает по-разному, потому что расчет происходит в момент рендера страницы

Вот пример, когда мы дожидаемся загрузки страницы и запускаем проверку.

document.addEventListener("DOMContentLoaded", function() {
    const elements = document.querySelectorAll('.your-class'); // Замените 'your-class' на нужный елмент
    if (elements.length > 0) {
        // Код, который нужно выполнить, если элементы с классом существуют
        console.log("Найден хотя бы один элемент с классом 'your-class'!");
    }
});

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

const elements = document.querySelectorAll('.your-class'); // Замените 'your-class' на нужный елмент
    if (elements.length > 0) {
        // Код, который нужно выполнить, если элементы с классом существуют
        console.log("Найден хотя бы один элемент с классом 'your-class'!");
    }

[Михаил]

Виталий Першин, Спасибо большое! Буду пробовать.

Answer 1

[Дмитрий Беляев]

document.addEventListener('DOMContentLoaded', () => {
    // ...
}, {once: true});

Comments

[Михаил]

Спасибо. После загрузки документа есть решение. Нужно после загрузки элемента по id или классу.

[Aetae]

Михаил, ну как-то так:

function waitSelector(selector, root = document) {
  const node = root.querySelector(selector);
  if (node) return Promise.resolve(node);

  return new Promise(resolve => {
    new MutationObserver((_, observer) => {
      const node = root.querySelector(selector);
      if (node) {
        observer.disconnect();
        resolve(node);
      }
    }).observe(root, { childList: true, subtree: true });
  })
}

let el = await waitSelector('#id');

Но это не для прода, разве что в юзерскриптах имеет смысл.

В реальном коде ты сам должен знать когда и где ты добавляешь тот или иной элемент с id или классом и именно там дорабатывать код, а не патчить его снаружи. Использование же такой фигни приведёт к неподдерживаемому коду, где непонятно откуда что берётся и почему меняется.