1

I am creating a script for adding attributes for some elements. And I want it to work for the dynamically added elements. I wanted to use Mutation Observe, but I got this error: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.

The code I use:

const langAdding = (tag) => {
    tag.setAttribute('lang', 'en-us');
}

const target = document

const callback = (mutations, observer) => {
    mutations.forEach(mutation => {
        switch (mutation.type) {
            case 'childList':
                for (const el of mutation.addedNodes) {
                    if (!el.hasAttribute("lang")) {
                        el = langAdding(el) 
                    } else if (el.firstElementChild) {
                        for (const child of el.getElementsByTagName('p')) {
                            child = langAdding(child);
                    }
                }
                break;
        }
    })
}

const observer = new MutationObserver(callback);

observer.observe(target, {
    childList: true,
    attributes: true,
    characterData: true,
    subtree: true
});

And I really don't know if I did everything right. Please help me if you find a mistake

Vla2d
  • 11
  • 1
  • 4
  • 1
    You must be missing tag? – Vinay May 23 '20 at 03:51
  • Use `document` instead of document.querySelector('body'). Also beware your observer creates an infinite loop of self-inflicted mutations to prevent which you need to check first if the attribute is already present or disconnect the observer before making changes. There's also no `forEach` method on addedNodes. – wOxxOm May 23 '20 at 04:37
  • @wOxxOm I've updated the code. Actually, I don't have console error, but the script doesn't work. And I don't quite understand what did you mean: _There's also no forEach method on addedNodes_. I use my function for `mutation.addedNodes` - they are new added elements, aren't they? – Vla2d May 24 '20 at 00:15
  • The code looks fine now but it doesn't account for the fact that the addedNodes isn't "flat" - each node in this collection may be a container with thousands of nodes inside so you'll need to enumerate those, examples: [one](https://stackoverflow.com/a/46844345/3959875), [two](https://stackoverflow.com/a/39334319). – wOxxOm May 24 '20 at 04:55
  • @wOxxOm I've updated the code, is it fine now? I add paragraphs on my page using button, but the script still doesn't work. – Vla2d May 25 '20 at 00:57
  • It means the problem is somewhere else, in the code that's not shown in the question. Maybe it's a timing problem e.g. this script runs after the changes are already done. Or maybe the nodes are already there and the mutations are created by directly modifying their contents (type = characterData). – wOxxOm May 25 '20 at 04:21

1 Answers1

0

The code in the question works correctly, I only needed to remove the last line in the code (observer.disconnect()) and I am very grateful for the help of @wOxxOm, who helped to rework the callback.

Vla2d
  • 11
  • 1
  • 4