使用JavaScript修改样式或DOM节点时，Render Tree与DOM/CSSOM哪个会变更？

Great question—this gets to the heart of how browsers handle dynamic updates after the initial page load. Let’s break it down based on the two scenarios you’re asking about:

1. Adding or Removing DOM Nodes #

• DOM Tree: This is the first tree that gets modified. The DOM is a direct, structured representation of your HTML, so adding a new <div> or deleting an existing <li> directly alters the DOM tree’s hierarchy and content.
• Render Tree: Since the Render Tree is built by combining visible DOM elements with their computed styles from the CSSOM, any DOM node change that affects visible elements will update the Render Tree. For example:
  • Adding a visible element (not set to display: none) adds it to the Render Tree.
  • Removing an element that was part of the Render Tree removes it from the tree.
• CSSOM: Unless you’re also adding or modifying style rules alongside the DOM nodes (like inserting a new <style> tag), the CSSOM stays exactly the same. The CSSOM stores all your stylesheet rules, and simple DOM node additions/removals don’t touch those rules.

2. Modifying Element Styles (e.g., via element.style or class toggles) #

• DOM Tree: The DOM tree’s structure doesn’t change here. You’re only updating a property of an existing node—like changing its inline style or switching a class—not adding or removing nodes from the hierarchy. The DOM node remains in place; only its style-related attributes are updated.
• Render Tree: This will almost always change. The Render Tree tracks every visible element plus its final computed styles, so any style change that affects how an element is displayed (even something as simple as text color) triggers an update. If the change affects layout (e.g., width, height) or visibility (e.g., display: none), the Render Tree update will be more impactful.
• CSSOM: The CSSOM only changes if you’re modifying the actual style rules themselves—like inserting a new stylesheet, updating a rule in an existing <style> tag, or adding a new media query. If you’re just tweaking an element’s inline style or using existing class rules, the CSSOM stays unchanged.

Quick Reference Table #

内容的提问来源于stack exchange，提问作者Kitts