MutationObserver

189
22 мая 2022, 07:30

Столкнулся с MutationObserver, понадобилось прокинуть кнопку, по нажатию на которую, раскрывалось подменю с ссылками.

var target = document.querySelector('#head-menu');
var observer3 = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      console.log(mutation.type);
      if(mutation.target.id == 'main-menu-doc') {
          console.log(mutation);
      }
    });    
  });
   observer3.observe(target,  config);
   var config = { attributes: true, childList: true, characterData: true };

Попробовал данный код, но выводит ошибку Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'. Хотя-бы простенький пример увидеть, как это должно выглядеть(классы и прочее не важно). :[ upd.

$("#head-menu .container ul").append('<li class="main-menu-doc" id="main-menu-doc"><span><a href="#">Инструкция по заказам</a></span></li>');

Как закидывал кнопку.

Answer 1

Такой пример ок?

// identify an element to observe
const elementToObserve = document.querySelector("#targetElementId");
// create a new instance of `MutationObserver` named `observer`, 
// passing it a callback function
const observer = new MutationObserver(function() {
    console.log('callback that runs when observer is triggered');
});
// call `observe()` on that MutationObserver instance, 
// passing it the element to observe, and the options object
observer.observe(elementToObserve, {subtree: true, childList: true});
function myFunction() {
  elementToObserve.innerText = "test ok";
}
<div id="targetElementId">test</div>
<button onclick="myFunction()">Click me</button>

READ ALSO
Не получается сделать калькулятор на js

Не получается сделать калькулятор на js

Решил сделать по гайдам простой калькулятор, но в место результата получаю NaN

198
Номер последнего видимого элемента RecyclerView = -1

Номер последнего видимого элемента RecyclerView = -1

Подскажите, пожалуйста, почему findLastVisibleItemPosition() возвращает -1

254
Задача: прокликать весь список, теряется один элемент

Задача: прокликать весь список, теряется один элемент

Стоит задача: прокликать меню и подгруппыС подгруппами проблем нет, есть проблема с основным меню, второй пункт меню мой тест почему-то пропускает...

139