css树的实现 |css兼容 float换行

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= 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树的构建，开发者可以更轻松地管理和维护网页中的各个元素和样式，这对于大型网站的开发和维护来说尤其重要。