🔗 DOM & CSSOM Practice

index.html

<!DOCTYPE html>
<html>
<head>
  <title>DOM & CSSOM Practice</title>
  <link rel="stylesheet" href="style.css">
  <style>
    body { font-family: sans-serif; }
  </style>
</head>
<body>
  <header>
    <h1>DOM & CSSOM Practice</h1>
  </header>
  <main>
    <section>
      <h2>Section Title</h2>
      <p>The DOM is a tree model of an HTML document.</p>
      <ul>
        <li>DOM Manipulation</li>
        <li>CSSOM Manipulation</li>
      </ul>
    </section>
    <section style="display: none;">
      <p>Not in the render tree</p>
    </section>
  </main>
</body>
</html>

style.css

h1 {
  color: blue;
}

section {
  background-color: lightgray;
  padding: 20px;
}

🌳 DOM Tree

Document
└── HTML
    ├── HEAD
    │   └── TITLE (Text: "DOM & CSSOM Practice")
    └── BODY
        ├── HEADER
        │   └── H1 (Text: "DOM & CSSOM Practice")
        └── MAIN
            ├── SECTION
            │   └── H2 (Text: "Section Title")
            │   └── P (Text: "The DOM is a tree model of an HTML document.")
            │   └── UL
            │       ├── LI (Text: "DOM Manipulation")
            │       └── LI (Text: "CSSOM Manipulation")
            └── SECTION (style="display: none;")
                └── P (Text: "Not in the render tree")

Including text nodes & style nodes

Document
└── html
    ├── head
    │   ├── title
    │   │   └── #text: "DOM & CSSOM Practice"
    │   ├── link (rel="stylesheet" href="style.css")
    │   │   ├── @rel="stylesheet"
    │   │   └── @href="style.css"
    │   └── style
    │       └── #text: "body { font-family: sans-serif; }"
    └── body
        ├── header
        │   └── h1
        │       └── #text: "DOM & CSSOM Practice"
        └── main
            ├── section
            │   ├── h2
            │   │   └── #text: "Section Title"
            │   ├── p
            │   │   └── #text: "The DOM is a tree model of an HTML document."
            │   └── ul
            │       ├── li
            │       │   └── #text: "DOM Manipulation"
            │       └── li
            │           └── #text: "CSSOM Manipulation"
            └── section (style="display: none;")
                ├── @style="display: none
                └── p
                    └── #text: "Not in the render tree"

🌴 CSSOM Tree

CSSStyleSheet (style.css)
  └── CSSRuleList
      ├── CSSRule (h1)
      │   └── CSSStyleDeclaration
      │       └── color: blue
      └── CSSRule (section)
          └── CSSStyleDeclaration
              ├── background-color: lightgray
              └── padding: 20px

CSSStyleSheet (internal styles)
  └── CSSRuleList
      └── CSSRule (body)
          └── CSSStyleDeclaration
              └── font-family: sans-serif
              
CSSStyleSheet (inline styles)
  └── CSSRuleList
      └── CSSRule (section)
          └── CSSStyleDeclaration
              └── display: none