DOM 樹和 CSS 樹都是前端開發中非常重要的概念，不同的樹在網頁加載過程中分別發揮著不同的作用。
DOM 樹，即文檔對象模型樹，是指 HTML 或 XML 文件中的所有元素（包括標簽、文本和注釋）組成的樹形結構。它將 HTML 文件中的各種元素以層次結構的形式呈現出來，將整個文檔變成一個由節點組成的樹形結構。每個節點都是一個對象，用來表示文檔中的一個元素、屬性或文本。在 JavaScript 開發中，開發者可以通過操作 DOM 樹來修改 HTML 頁面的結構、樣式和行為，實現動態的交互體驗。
<html>
<head>
<title>DOM 樹</title>
</head>
<body>
<div>
<p>這是一個段落</p>
<ul>
<li>列表項 1</li>
<li>列表項 2</li>
<li>列表項 3</li>
</ul>
</div>
</body>
</html>CSS 樹，即層疊樣式表樹，是指 CSS 樣式表中的各個規則在應用到文檔對象模型樹上之后生成的樹形結構。CSS 規則在應用到 DOM 樹之前首先會根據選擇器規則匹配 HTML 或 XML 中的元素，然后再應用相應的樣式屬性。生成的 CSS 樹中的每個節點都代表一個樣式規則，其中包括選擇器和樣式屬性兩個部分。
body {
background-color: #f1f1f1;
font-family: Arial, sans-serif;
}
h1 {
color: #555;
font-size: 24px;
}
p {
color: #666;
font-size: 16px;
line-height: 1.5;
}
ul li {
color: #999;
font-size: 14px;
margin: 5px 0;
}在瀏覽器渲染頁面的過程中，當瀏覽器遇到一條樣式規則之后，會根據選擇器匹配出對應的 DOM 節點，并將樣式屬性應用到節點上。這樣，通過 CSS 樹，我們可以實現對 DOM 樹中的元素進行樣式修飾，從而美化頁面、改善用戶體驗。