How is HTML DOM changed?
When changing element styles which don’t affect the element’s position on a page (such as background-color, border-color, visibility), the browser just repaints the element again with the new styles applied (that means a “repaint” or “restyle” is happening).
When the changes affect document contents or structure, or element position, a reflow (or relayout) happens. These changes are usually triggered by:
DOM manipulation (element addition, deletion, altering, or changing element order);
Contents changes, including text changes in form fields;
Let’s see a few examples:
var bstyle = document.body.style; // cache
bstyle.padding = “20px”; // reflow, repaint
bstyle.border = “10px solid red”; // another reflow and a repaint
bstyle.color = “blue”; // repaint only, no dimensions changed
bstyle.backgroundColor = “#fad”; // repaint
bstyle.fontSize = “2em”; // reflow, repaint
// new DOM element – reflow, repaint