CSS对象模型CSSOM是什么？

2020-10-12  本文已影响0人  读行笔记

CSSOM，即CSS Object Model，CSS对象模型，是对CSS样式表的对象化表示，同时还提供了相关API用来操作CSS样式。

这里有一个问题：既然已经有了DOM树结构来表示HTML文档结构，那为什么不把CSS顺便放在在DOM上，以便我们直接从Element上获取所有样式信息呢？

很明显，如果把CSS信息一起建模在DOM结构上，就会违背”单一职责原则“。因为正如在网页中HTML承担了语义职能，CSS承担了表现职能一样，在计算机中DOM承担了语义职能，而CSSOM承担了表现职能。

在W3C标准中，CSSOM包含两部分：

在实际工作中，CSSOM Model部分使用的并不多，因为样式表一旦定义好，就不会轻易改变，至多通过element.style修改特定样式属性。反而，CSSOM View部分使用的稍微多一点。

注意：element.style只是获取某个元素的内联样式，而非完整的样式表。

CSSOM Model

原理

Model部分是CSSOM的本体，通常都是用HTML标签style或者link标签即可创建：


<style title="cssom">
a {
  color:#233;
}
</style>

<link rel="stylesheet" title="x" href="somestyle.css">

比如，对于这段代码：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>Critical Path</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
  </body>
</html>

构建DOM的大致过程如下：

DOM树构建过程

假如somestyle.css文件的内容如下：

body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }

构建CSSOM的过程和构建DOM的过程类似，但前者要依赖后者，因为只有HTML内容具有完整的树形结构关系，而CSS样式表并没有。

CSSOM树结构

具体而言，在构建CSSOM树时，对于任何一个元素的最终样式，浏览器都会从适用于该节点的最上层节点开始，通过递归的方式不断向下合并更加具体的规则，最终得出完整的结果，这就是向下级联(Cascade)的含义。

基本用法

document.styleSheets

document.styleSheets表示文档中的所有样式表，是一个只读的列表。我们可以用方括号运算符下标访问样式表，也可以使用item方法来访问，它还有length属性表示文档中的样式表数量。基本结构如下所示：

insertRule removeRule

虽然不能创建样式表，但是可以修改（插入和移除）某个样式表中的内容：

document.styleSheets[0].insertRule("p { color:pink; }", 0)
document.styleSheets[0].removeRule(0)

实际上，用这种方式修改元素样式的案例并不多见。反而，直接修改元素的内联样式是比较常见的。比如：

var elem = document.querySelector('#some-element');

// 逐个修改
elem.style.color = 'purple';
elem.style.backgroundColor = '#e5e5e5';

// 整体修改
Object.assign(elem.style, {fontsize:"12px",left:"200px",top:"100px"});
// 或者修改cssText
elem.style.cssText = "display: block; position: absolute";

还可以通过创建style标签来修改。

var style = document.createElement('style');
style.innerHTML =
    '.some-element {' +
        'color: purple;' +
        'background-color: #e5e5e5;' +
        'height: 150px;' +
    '}';

// 获取第一个script标签
var ref = document.querySelector('script');
// 将style插在第一个script标签之前
ref.parentNode.insertBefore(style, ref);

如上面展开的CSSStyleSheet结构所示，当取到document.styleSheets[n].cssRules时，同样也可以支持item、length和下标运算，但是这些Rules有点特殊，可分为两种：

window.getComputedStyle

这是一个非常重要的方法，用来获取某个元素经过内联计算得到的最终样式。有两个参数，第一个要获取的Element，第二个是伪元素，可选。

window.getComputedStyle(elt, pseudoElt);

window.getComputedStyle(document.body.firstElementChild);
window.getComputedStyle(document.body.firstElementChild, "::after");

CSSOM View

这部分内容可分成三个部分：窗口部分，滚动部分和布局部分。

窗口

窗口API用于操作浏览器窗口的位置、尺寸等。有四个API：

但是，很多浏览器出于安全考虑，有些API并没有实现，有些实现了却进行了特殊限制。比如，在Chrome中, 只有通过window.open创建的窗口才起实际作用。

window.open("about:blank", "_blank" ,"width=1000,height=1000,left=100,right=100" )

滚动

滚动行为分为视口滚动和元素滚动两种，它们在PC时代可能差别不大，但在移动端产品越来越多的时代，存在着一定差异。

视口滚动

视口滚动行为主要由window对象上的一组API控制：

如果要监控视口的滚动行为，则需要在document对象上绑定事件监听函数：

document.addEventListener("scroll", function(event){
  console.log(window.scrollY)
})

元素滚动

为了让Element支持滚动，加入了这些API：

同样，也支持监听。

element.addEventListener("scroll", function(event){
  //......
})

布局

这是整个CSSOM中最常用到的部分，同样要分成全局API和元素上的API。

全局

window对象上提供的一些全局尺寸信息：

window.screen

    availHeight: 988
    availLeft: 0
    availTop: 23
    availWidth: 1920
    colorDepth: 24
    height: 1080
    orientation: ScreenOrientation
        angle: 0
        onchange: null
        type: "landscape-primary"
        __proto__: ScreenOrientation
    pixelDepth: 24
    width: 1920
    __proto__: Screen

元素

获取元素的布局信息，无非就是位置和尺寸大小，位置信息比较确定，一般是起始点，但尺寸信息并不好操作。因为只有具体的“盒”才有尺寸大小信息，而一个元素可能产生多个“盒”。鉴于这种情况，CSSOM提供了两个方法：

如果我们要获取相对坐标，或者包含滚动区域的坐标，需要一点小技巧：

var offsetX = document.documentElement.getBoundingClientRect().x - element.getBoundingClientRect().x;

另外，DOM上还提供了一个方法document.elementFromPoint(x, y)，可以通过这个方法获取处在特定坐标点的元素。然后再配合上面的方法，便可得到具体元素的布局信息。

总结

正如在网页中，HTML承担了语义职能，CSS承担了表现职能一样；在计算机中，DOM承担了语义职能，而CSSOM承担了表现职能。

模型部分是CSSOM的本体，是所有样式表对象化表示，有助于开发者读取和修改。通过document.styleSheets可获取所有样式表，结果是一个只读列表，但可以通过下标运算修改。

实际上，通过这种方式修改样式信息并不多见，更多的是通过element.style直接修改内联样式，有多种方式可选。

View部分是CSSOM的核心，可分为三类：窗口、滚动和布局相关API。

上一篇下一篇

猜你喜欢

热点阅读