Is it possible to respond to elements being added to the DOM before the document load event is fired in Javascript? -

i'm trying make javascript embed manipulate page loads. script in header, , want able manipulate element can found document.queryselector. in other words, needs react changes in dom while document.readystate "interactive", before "loaded". can't use timeout/interval because document loading blocks until full document loaded, if put timeout of 0ms not execute until document.readystate "loaded".

are there events fire elements added dom? tried domnodeinserted, seems fire elements added asynchronously after document loaded.

lastly, must accomplished javascript; not have access html or server. embed going on other people's sites.

you should attach events document , check event's target and, in case need, perform action want. example:

document.addeventlistener("click", function(e){   var element = e.target;   if (element.nodename === "a") {     //i gonna <a> elements     //don't forget return true if anchor , want default event trigger because if not, cancel event.    } else if (element.classname.match("myclass")) {     //ok, element contains class looking for, let's   } else if (element.id === "myid") {     //i found element id looking   } }); 

update (for nodes insertion):

document.addeventlistener("domnodeinserted", function(e){       // e mutationevent       var element = e.target;       //behavior here pretty same above       if (element.nodename === "a") {         //i gonna <a> elements         //don't forget return true if anchor , want default event trigger because if not, cancel event.        } else if (element.classname.match("myclass")) {         //ok, element contains class looking for, let's       } else if (element.id === "myid") {         //i found element id looking       }     }); 

another update:

i found link may result interesting. uses animations determine when object has been inserted dom. created fiddle little poc , seems want.