Блог

Главная - Вопросы по программированию - Javascript: MutationObserver не показывает мне измененные узлы

Javascript: MutationObserver не показывает мне измененные узлы

#javascript #google-chrome-extension

#javascript #google-chrome-extension

Вопрос:

Это MutationObserver простой API, который позволяет мне отслеживать изменения DOM. Я использую его в расширении Chrome, я хочу знать, когда добавляются определенные элементы на веб-странице. и используя childList опцию, которая должна сообщать мне, когда указанная цель добавляет новые узлы.

Из документов Mozilla: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/childList

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

но при обратном change.addedNodes вызове значение and change.removedNodes равно false . несмотря на то, что печать целевых childNodes.length объектов показывает, что количество дочерних элементов действительно меняется

 let content_box = document.querySelector('div#content-box');    // target to monitor

// create observer with callback
let observer = new MutationObserver( (mutations, observer) => {

    mutations.forEach( change => {
            console.log(`Added:  ${change.addedNodes==true}`)    // no added nodes   (there should be)
            console.log(`Removed ${change.removedNodes==true}`)  // no removed nodes (which is fine)
            console.log(change.target)                           // I've confirmed the target is the correct one
            console.log(change.target.childNodes.length)         // after multiple callbacks the length of children is actually increasing 
    })

})


observer.observe(content_box, {
    childList: true,     // monitoring for childList changes
    attributes: false,
    subtree: false,
})

Комментарии:

1. .addedNodes и .removedNodes являются NodeList s. Почему вы сравниваете их с true (которые будут оцениваться false )? -> change.addedNodes.length > 0

2. @Andreas Просто чтобы посмотреть, есть ли они. Mozilla говорит, что они будут false или null или что-то в этом роде, если они не являются добавленными / удаленными узлами.

3. change это a MutationRecord , а упомянутые свойства ( .addedNodes , .removedNodes ) — NodeList s, как вы можете видеть в документации о MutationRecord s

4. @Andreas.. Ах, я вижу проблему. Я думаю, я просто предположил, что он будет оценивать false , если внутри ничего не было, и верно, если было что-то вроде, и массив будет правильным? Но мне любопытно. почему бы не NodeList быть ложным, если в нем ничего не было, и true если бы это было так? Я использую другие языки, но иногда использую javascript, поэтому я не уверен в его работе.

5. Если я правильно понял… 10 -> 12, ToPrimitive(x) -> OrdinaryToPrimitive(x, "number") -> x.valueOf() ( возвращает x ( this )) -> x.toString() (возвращает [object Object] ). Итак, теперь у нас "[object Object]" == 0 есть , и ToNumber("[object Object]") возвращает 1 -> 1 == 0 -> false ( тестовый пример для x.valueOf() и x.toString() )

Ответ №1:

Вы хотите проверить, находится ли свойство addedNodes в объекте change . итак console.log("addedNodes" in change) , чтобы получить истинный результат.

 let content_box = document.querySelector('div#content-box');    // target to monitor

// create observer with callback
let observer = new MutationObserver( (mutations, observer) => {

    mutations.forEach( change => {

            console.log(`Added:  ${"addedNodes" in change}`)    // no added nodes   (there should be)

            console.log(`Removed ${"removedNodes" in change}`) // no removed nodes (which is fine)
            console.log(change.target)                           // I've confirmed the target is the correct one
            console.log(change.target.childNodes.length)         // after multiple callbacks the length of children is actually increasing 
    })

})


observer.observe(content_box, {
    childList: true,     // monitoring for childList changes
    attributes: false,
    subtree: false,
})