Possible to modify DOM during/before initial DOM parsing?

Question

Is it possible to modify the DOM during or before the initial DOM parsing? Or do I have to wait until the DOM is parsed and built before interacting with it? More specifically, is it possible to hinder a script element in DOM from running using userscripts/content scripts or similar in chrome or firefox?

Tried using eventListeners on DOMNodeInserted before the DOM is parsed, but these are only fired after the DOM is built.

Answer 1

I've actually looked into this a lot while developing an adblocker for Chrome. Basically, you can't use just Javascript to stop Javascript, especially since it would run simultaneously with the script element in question. So even if it would work it would cause a race condition.

Answer 2

you can modify elements during document parsing, but after than this element has added to dom. for example

<div id="example"></div>
<script>
    document.getElementById('example').innerHTML = 'hello';
</script>
<div>something else</div>

Answer 3

These are two separate questions:

1. Is it possible to modify the DOM during or before the initial DOM parsing?

Yes. As soon as the browser builds the root element, then you can start querying and mutating the DOM. Note that when your script runs, some of the page may still yet be unparsed, perhaps even still in transit on the network. Your script generally has access to any element declared in the source before the script tag containing/calling your script. This includes parent elements containing your script tag.

2. Is it possible to hinder a script element in DOM from running using userscripts/content scripts or similar in chrome or firefox?

No. All scripts are executed and one script can't prevent another script's initial execution. However, you can perhaps go back through and remove event handlers, and otherwise attempt to counteract the effects of a script. Although this scenario seems a bit shady and/or against the grain of normal JavaScript usage.

Answer 4

I've used setInterval to run a script to test for the creation of a DOM element. When the function finds the element it does a clearInterval and proceeds to modify the DOM. I've been looking for a better way but this one seems to work ok.