0

Here's my understanding - feel free to correct.

So you have some HTML, rendered in the browser.

<h1 id="header"> hi. </h1>

and in js, you select that html element and create a DOM element, a special JS object that represents the HTML element.

let h1 = document.querySelector("#header")

you make a change to the DOM element in JS.

h1.innerText = 'NEW STUFF'

The browser reacts to this change, and replicates the change in the viewport - presumably, it changes the source HTML and that triggers a re-render of the whole document.

Question - specifically, How does the browser monitor changes to DOM elements and their properties?

any help is much appreciated.

das_schnuben
  • 101
  • 1
  • 3
  • 1
    This question is too broad. Conceptually, all you need it a flag to be set when `.innerText` or any other DOM modification method or property is set or run, that can be tested when the JS completes and a re-render done if the flag is set. But the details are hugely complicated, not least because it would be very slow for the browser to re-render the document from scratch every time a change happened. Can you narrow down what you need to understand about the process? – Alohci Feb 09 '21 at 01:48
  • 3
    First in a browser the DOM is not written in js, but is lower level code. JS only communicates with this lower level code. Then the markup is normally converted only once to DOM nodes, there is no markup anymore. Finally you need to understand how the event-loop works in a browser. JS is just a small part of what a browser does (it may even have it disabled altogether). The rendering is part of the event loop, as to how they should detect changes requiring a new rendering, this is not really specced but most implementations just use is_dirty kind of flags they check at every rendering frame. – Kaiido Feb 09 '21 at 02:09

1 Answers1

1

I don't know 100% but, it probably just detects when you use certain JS that changes the DOM, then updates it.

For example, it probably updates it after you change an elements text or something.

But, if you are trying to detect it yourself, you can't do it with JS, like someone else said, it is written in lower level code.

alec wilson
  • 176
  • 1
  • 3
  • 13