Как можно заменить конструкцию `$('#more').ready(function() {` с использованием чистого JavaScript?

Question

Evelyn

javascript

Как можно заменить конструкцию `$('#more').ready(function() {` с использованием чистого JavaScript?

Как можно заменить код jQuery `$('#more').ready(function(){ ... })` на чистый JavaScript, чтобы код внутри выполнялся только после загрузки элемента с определенным id или классом, а не после загрузки всего документа, как в примере с `window.onload = function() { ... }`?

26 октября 2024 г. 11:02

Ответы на вопрос 2

Похожие вопросы

Answer 1

В чистом JavaScript нет прямого аналога методу `ready()` из jQuery. Однако вы можете добиться аналогичного поведения, используя `MutationObserver` или проверяя наличие элемента в цикле, пока он не появится в DOM. Ниже приведены два подхода.

### 1. Использование `MutationObserver`

Это более производительный способ, так как позволяет следить за изменениями в DOM.

```javascript
const targetId = 'more'; // Замените на нужный id

const observer = new MutationObserver((mutations, observer) => {
    const element = document.getElementById(targetId);
  
    if (element) {
        // Элемент найден, выполните ваш код здесь
        console.log('Элемент найден:', element);
        
        // Остановите наблюдение, если элемент найден
        observer.disconnect();
    }
});

// Начинаем наблюдение за изменениям в документе
observer.observe(document.body, { childList: true, subtree: true });
```

### 2. Циклическая проверка

Другой способ — это периодически проверять наличие элемента с помощью интервала.

```javascript
const targetId = 'more'; // Замените на нужный id

const interval = setInterval(() => {
    const element = document.getElementById(targetId);
    
    if (element) {
        // Элемент найден, выполните ваш код здесь
        console.log('Элемент найден:', element);
        
        // Остановите интервал, если элемент найден
        clearInterval(interval);
    }
}, 100); // Проверяем каждые 100 мс
```

### Итог

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

Answer 2

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