The DOM Is Not Your HTML

• The HTML parser produces the tree, obeying insertion rules that are part of the specification rather than of your file. The result is deterministic across browsers precisely because those repairs are specified (Tree Construction).
• Every node is a live object with identity. document.getElementById('x') === document.getElementById('x') is true: a query returns a reference to the existing object, never a copy of it.
• Attributes are the serialized initial configuration. Properties are the current state of the object. Some reflect each other in both directions (id, className, href), some are one-way (value, checked, selected set only the default), and some exist only as properties (offsetTop, dataset, _internal state).
• Computed style is not on the node in any form you wrote. It is the result of running the cascade over the CSSOM for that element, and the browser recomputes it lazily on its own schedule (Style Calculation, Inheritance and Computed Style).
• Layout boxes exist only after layout ran, and only for nodes that generate one. A display: none subtree is in the DOM with no geometry at all, which is why reading its size returns zeros (The Box Model).
• The accessibility tree is a third derived structure: role, name, description, state and relationships computed from the element type, its attributes, its ARIA and its label associations, then handed to platform assistive technology (The Accessibility Tree).
• So there is one source of truth and several projections. Change the DOM and every projection downstream of it is marked stale; the browser decides when to recompute each one.

<button id="save" class="btn btn--primary" disabled>  Save  </button>

  tag              button
  attributes       id="save"  class="btn btn--primary"  disabled=""
  properties       id="save"  className="btn btn--primary"
                   disabled=true        <- reflects the attribute
                   value=""             <- does NOT reflect anything
                   dataset={}           isConnected=true
  children         1 text node: "  Save  "   (whitespace is a node)
  listeners        click     (bubble, from app.js:212)
                   keydown   (capture, from a11y-shim.js:44)  <- you did not add this
  computed style   display:inline-flex  color:rgb(255,255,255)
                   pointer-events:none  (from .btn[disabled])
  layout box       x:812 y:64 w:96 h:36   border-box, in flow
                   (zero if display:none — the node still exists)
  a11y             role:      button
                   name:      "Save"      (trimmed from the text node)
                   state:     disabled, not focusable
                   relations: aria-describedby -> #save-hint (resolves)

• Reason about the Elements panel, never View Source. They answer different questions, and only one of them describes the page that exists right now (A Mental Model of the Devtools).
• Before debugging, name which layer you are asking about: the markup, the node object, an attribute, a property, an attached listener, computed style, the layout box, or the accessibility semantics. Most "the DOM is lying to me" bugs are a question asked of the wrong layer.
• Choose elements so the accessibility projection is correct by construction. A button produces a node with a role, a name, keyboard behaviour and a default action for free; a div with a click handler produces a node with none of them (Semantics Are Behaviour).
• Keep node count proportional to what a person can actually perceive at once. Every node costs memory, style recalculation, layout and an accessibility node forever.
• Mutate the specific thing that changed rather than re-serialising a subtree. Replacing markup you did not change is the single most common way to lose focus, selection and listeners (What a Mutation Costs).