Слушайте элементы HTML без setInterval

Мне интересно, можно ли прослушивать элементы в DOM без использования setInterval, как я делаю это прямо сейчас:

var interval = setInterval(() => {
  var div = document.querySelector('.test');
  if (div != null) {
    clearInterval(interval);
    console.info(div);
  }
}, 1000);

Моя проблема в том, что этот конкретный div загружается в DOM через 10-12 минут случайным образом. И я думаю, что setInterval - просто уродливое решение для этого. Итак, мой вопрос: можно ли вообще прослушивать новые div в DOM без использования интервала?

Уверяю вас, что любой другой код для проверки этого элемента DOM будет работать таким же образом

— 03.10.2018 21:47

javascript jquery

03.10.2018 21:46

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

289

Ответы 2

Этого можно добиться с помощью анимации ключевых кадров CSS.

Javascript:

(function(){

    var count = 1,
    event = function(event){
        if (event.animationName == 'nodeInserted')
     event.target.textContent = 'Element ' + count++ + ' has been parsed!';
    }

    document.addEventListener('animationstart', event, false);
    document.addEventListener('MSAnimationStart', event, false);
    document.addEventListener('webkitAnimationStart', event, false);

    // this is test code which imitates your div being created
    // after a delay
    setTimeout(function(){
        var div = document.createElement('div');
        div.setAttribute('class', 'some-control');

        document.getElementById('test').appendChild(div)
    }, 2000);

})();

CSS:

    @keyframes nodeInserted {  
        from {  
            outline-color: #fff; 
        }
        to {  
            outline-color: #000;
        } 
    }

    @-moz-keyframes nodeInserted {  
        from {  
            outline-color: #fff; 
        }
        to {  
            outline-color: #000;
        }  
    }

    @-webkit-keyframes nodeInserted {  
        from {  
            outline-color: #fff; 
        }
        to {  
            outline-color: #000;
        }  
    }

    @-ms-keyframes nodeInserted {  
        from {  
            outline-color: #fff; 
        }
        to {  
            outline-color: #000;
        } 
     }

    @-o-keyframes nodeInserted {  
        from {  
            outline-color: #fff; 
        }
        to {  
            outline-color: #000;
        }  
    } 

    div.some-control {
        padding: 50px;
        background: #FF6A6A;
        animation-duration: 0.01s;
        -o-animation-duration: 0.01s;
        -ms-animation-duration: 0.01s;
        -moz-animation-duration: 0.01s;
        -webkit-animation-duration: 0.01s;
        animation-name: nodeInserted;
        -o-animation-name: nodeInserted;
        -ms-animation-name: nodeInserted;        
        -moz-animation-name: nodeInserted;
        -webkit-animation-name: nodeInserted;
    }

    div.some-control div.some-control {
        background: #87CEFF;
    }

Кредит: http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/

@Katamari Это довольно крутой хакер, я тоже его не видел, пока не пытался ответить на этот вопрос.

— 03.10.2018 22:07

03.10.2018 22:00

Кажется, это хорошая работа для Наблюдатель за мутациями. Он будет наблюдать за статическим родителем в вашей DOM и предупреждать вас о любых изменениях в структуре. Вы можете прослушивать дочерний узел с классом test, который будет добавлен. Например:

// this setTimeout is only to show this example working. it is not needed 
setTimeout(() => {
  let aDiv = document.createElement('div');
  aDiv.className = 'test';
  document.getElementById('parent').appendChild(aDiv);
}, 3000);

let targetNode = document.getElementById('parent');

let config = {
  attributes: false,
  childList: true,
  subtree: true
};

// Callback function to execute when mutations are observed
let callback = function(mutationsList, observer) {
  for (let mutation of mutationsList) {
    if (mutation.type == 'childList') {
      for (let node of mutation.addedNodes) {
        if (node.className === "test") {
          console.info("a node with class test was added!");
          // stop observing
          observer.disconnect();
        }
      }
    }
  }
};

// Create an observer instance linked to the callback function
let observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);