CSS樹是前端開發中常用的一種數據組織方式。它可以將網頁中的各個元素和樣式按照一定的層次關系進行組織和管理，方便開發者對網頁進行維護和管理。

CSS樹的實現主要依賴于HTML DOM和CSSOM兩個API。HTML DOM可以用來獲取網頁中的各個元素及其關系，而CSSOM則可以用來獲取各個元素應用的所有樣式，以及樣式的優先級關系。

/*
* 獲取所有的HTML元素與其父子關系
*/
function getHtmlElementTree() {
var body = document.body,
stack = [{ ele: body, level: 0, children: [] }],
stackCurrent, i, j, len;
while (stackCurrent = stack.pop()) {
for (i = 0, len = stackCurrent.ele.children.length; i< len; i++) {
var child = stackCurrent.ele.children[i],
obj = { ele: child, level: stackCurrent.level + 1, children: [] };
stackCurrent.children.push(obj);
stack.push(obj);
}
}
return body;
}
/*
* 獲取所有元素應用的樣式
*/
function getAllStyles() {
var htmlElements = getHtmlElementTree(),
styles = [],
i, j, elem, rules;
for (i = 0; i< htmlElements.length; i++) {
elem = htmlElements[i];
rules = window.getMatchedCSSRules(elem);
for (j = rules.length - 1; j >= 0; j--) {
if (rules[j].style) {
styles.push({
ele: elem,
style: rules[j].style,
specificity: calculateSpecificity(rules[j].selectorText)
});
}
}
}
return styles;
}
/*
* 計算CSS選擇器的優先級
*/
function calculateSpecificity(selector) {
var specificity = [0, 0, 0],
selectorParts = selector.split(' ');
for (var i = 0; i< selectorParts.length; i++) {
var part = selectorParts[i];
if (part.charAt(0) === '#') {
specificity[1] += 1;
} else if (part.charAt(0) === '.') {
specificity[2] += 1;
} else {
specificity[0] += 1;
}
}
return parseInt(specificity.join(''), 10);
}

上述代碼主要展示了如何使用JavaScript實現CSS樹的構建，并獲取各個元素應用的所有樣式及其優先級。其中，通過getHtmlElementTree()函數可以獲取網頁中所有HTML元素的層次關系，而getAllStyles()函數可以獲取所有元素應用的樣式，其中calculateSpecificity()函數用于計算CSS選擇器的優先級。

通過CSS樹的構建，開發者可以更輕松地管理和維護網頁中的各個元素和樣式，這對于大型網站的開發和維護來說尤其重要。