Is there a way to prevent all DOM mutations on a webpage?

JavaScript
1

Let’s say some webpage is full of DOM mutations in the form of various popups of image, audio and video elements popping up and distracting the avarage user from reading and acting on that webpage.

Is there a way to prevent all DOM mutations on a webpage so no such DOM mutation popups would occur?

I don’t want to turn off JavaScript altogether for that webpage, just to prevent its DOM mutations.

2

So what exactly do you want Javascript to do, that does not involve a mutation?

3

Preventing specific DOM mutations while allowing other JavaScript functionality on a webpage can be challenging. JavaScript is a powerful language, and once a script is executing, it has the ability to manipulate the DOM in various ways, including creating popups, images, audio, and video elements.

4

It sounds like you are asking for something like this

Enabling that depends on the browser and is something the user has to do manually.

That or an extension like UBlock?

Edit: What web page? It isn’t really clear what you are trying to achieve here. Is it your web page? Or is it web pages in general?

5

I think that some things in JavaScript don’t involve a DOM mutation, such as:

  • alert()
  • infinite loops like while(1);
  • Listening to some events like keypress
  • Changing a URL

I just want to know if there is way to “prevent the default” behavior of JavaScript in all that has to do with causing DOM mutations.

6

I mean to a code which I could run in console in any webpage whatsoever.

After this console code ran, no DOM mutation could occur.

7

The answer seems to be a resounding ‘No’.

Did you click on the firefox link I added? Isn’t it easier to click on an icon to go into reader mode or use a blocking extension, rather than paste code into the console?

Why does it have to be javascript in a console? What is the reason behind this request?

8

I don’t use FireFox currently :slight_smile:

The reason I asked for a console code is just to learn a code I never found or figured.

9

It is possible to prevent DOM mutations without completely disabling JavaScript, but this approach should be used with caution because it can break the functionality of the webpage that relies on these mutations.

The key to preventing DOM mutations is to use the MutationObserver API, which allows you to react to changes in the DOM. You can observe the entire document and disconnect the observer in the callback function immediately, which effectively stops any DOM mutations from occurring.

Here’s a simple example of how you might use MutationObserver to prevent any changes to the DOM:

// Select the node that will be observed for mutations
const targetNode = document.documentElement;

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            // Since we're immediately removing the node, there can be side effects
            mutation.addedNodes.forEach(node => node.remove());
        } else if (mutation.type === 'attributes') {
            // Revert the attribute change by setting the old value
            mutation.target.setAttribute(mutation.attributeName, mutation.oldValue);
        }
    }
};

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

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

// Later, you can stop observing
// observer.disconnect();

In this script, we are observing the entire document for changes and reacting to them. For childList mutations, which include adding or removing elements from the DOM, it removes any added nodes. For attributes mutations, it reverts any changes to the attributes of elements.

However, there are some important caveats:

  1. Breaking Functionalities: Preventing DOM mutations may stop essential functions of the page from working, including form submissions, page navigation, interactive content, etc.

  2. Performance: Having an observer that checks every change on the whole document can lead to performance issues, especially on dynamic pages that have a lot of legitimate DOM changes.

  3. Side Effects: Since you’re preventing default behaviors, it may lead to unforeseen side effects on the webpage’s functionality.

If you simply want to prevent popups or certain types of DOM changes without breaking the rest of the page’s functionality, you should be more selective about what mutations you observe and how you handle them. For example, you could only remove nodes that match certain criteria (like modal dialog elements) or prevent the addition of elements with certain classes or IDs that are known to be popups.

Good luck.

2 Likes
10

Try stopping mutations on this website. See how that works out for you.

  • How many sites you visit use alert?
  • How many sites you visit use an infinite loop that does nothing to the DOM
  • Again, how many sites listen to a keypress and then do nothing to the DOM…
  • Changing a URL is a DOM manipulation, unless you mean the window.location HREF, in which case you’re changing the page, which will trigger thousands of mutations as the new page loads. (Every element that gets written onto or changed in the page is a mutation…)

I do not think you have thought this through.

2 Likes
11

About the how many - for me personally even one an example for JS that don’t invovle DOM manipulation.

As you know, a URL doesn’t appear in a DOM tree because it’s not an HTML tag or part of an HTML tag, so I don’t know what did you mean that changing a URL is a DOM manipulation.

Anyway, yes, I meant changing window.location.href would bring a new tab not with a mutated DOM, rather, just with a a new and another DOM.

12

You’re trying to disable javascript without disabling javascript. 99.99999999% of javascript will mutate the DOM in some way.
You post something on this forum? couple dozen mutations.
You want to see replies without reloading the page manually? dozens more.
Visit any page that has a picture carousel, or loads elements dynamically (hi Google, Facebook, X/Twitter)… guess what? hundreds or thousands of mutations…

1 Like