DOM 和 CSSOM 总结

[MengZhaoFly]

DOM 和 CSSOM 同属 浏览器 api。

DOM：文档对象模型, 浏览器解析 HTML 之后得到结果。

DOM API

• 节点：DOM 树形结构中的节点相关 API。
• 事件：触发和监听事件相关 API。
• Range：操作文字范围相关 API。
• 遍历：遍历 DOM 需要的 API。

节点

DOM 的树形结构所有的节点有统一的接口 Node。
节点的类型：

• Element
  • HTMLElement
    • HTMLAnchorElement
    • HTMLBodyElement
  • SVGElement
• Document
• DocumentFragment

https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType

DocumentFragment 非常有用，它常常被用来高性能地批量添加节点

Node

Node 是 DOM 树继承关系的根节点

Node 提供了一组属性，来表示它在 DOM 树中的关系:

• parentNode
• childNodes
• firstChild
• lastChild
• nextSiblingp
• reviousSibling

Node 中也提供了操作 DOM 树的 API：

• appendChild
• insertBefore
• removeChild
• replaceChild

注意：一个元素只能属于一个父节点，假如插入同一个节点在两个不同位置，其实是一个移动的操作；另外 选出来的 collection 是一个 live collection，

  <ul id="wrap">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <ul id="wrap1"></ul>
  <script>
    const wrap = document.getElementById('wrap');
    const lists = wrap.getElementsByTagName('li');
    // 3
    console.log(lists.length)
    const wrap1 = document.getElementById('wrap1');
    wrap1.appendChild(lists[0])
    // 2
    console.log(lists.length)
  </script>

另外，
除此之外，Node 还提供了一些高级 API：

• compareDocumentPosition 是一个用于比较两个节点中关系的函数。
• contains 检查一个节点是否包含另一个节点的函数。
• isEqualNode 检查两个节点是否完全相同。
• cloneNode 复制一个节点，如果传入参数 true，则会连同子元素做深拷贝

DOM 标准规定了节点必须从文档的 create 方法创建出来，不能够使用原生的 JavaScript 的 new 运算。于是 document 对象有这些方法。
createElement
createTextNode
createDocumentType
...

Element 与 Attribute

• getAttribute
• setAttribute
• removeAttribute
• hasAttribute

查找元素

querySelector
getElementById
...

遍历

一个树的遍历，迭代或者递归。

Range

更精确的控制节点操作，常见类似富文本编辑类业务。

CSSOM

正如 HTML 和 CSS 分别承担了语义和表现的分工，DOM 和 CSSOM 也有语义和表现的分工：
DOM 中的所有的属性都是用来表现语义的属性，CSSOM 的则都是表现的属性。

CSSOM结构相关

先获取文档中所有的样式表：

document.styleSheets

修改样式表中的内容:

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

取到特定的规则：

document.styleSheets[0].cssRules[1].styleMap.get('color').toString()

获取一个元素最终经过 CSS 计算得到的属性：

window.getComputedStyle(elt, pseudoElt);

其中第一个参数就是我们要获取属性的元素，第二个参数是可选的，用于选择伪元素。

CSSOM View

CSSOM View 这一部分的 API，可以视为 DOM API 的扩展，它在原本的 Element 接口上，添加了显示相关的功能，这些功能，又可以分成三个部分：窗口部分，滚动部分和布局部分

窗口部分

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

• moveTo(x, y) 窗口移动到屏幕的特定坐标；
• moveBy(x, y) 窗口移动特定距离；
• resizeTo(x, y) 改变窗口大小到特定尺寸；
• resizeBy(x, y) 改变窗口大小特定尺寸。
  此外，窗口 API 还规定了 window.open() 的第三个参数。

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

滚动

viewport 滚动由 window 上一组api控制

• scrollX 是视口的属性，表示 X 方向上的当前滚动距离，有别名 pageXOffset；
• scrollY 是视口的属性，表示 Y 方向上的当前滚动距离，有别名 pageYOffset；
• scroll(x, y) 使得页面滚动到特定的位置，有别名 scrollTo，支持传入配置型参数 {top, left}；
• scrollBy(x, y) 使得页面滚动特定的距离，支持传入配置型参数 {top, left}。

Element 由 元素自身决定

• scrollTop 元素的属性，表示 Y 方向上的当前滚动距离。
• scrollLeft 元素的属性，表示 X 方向上的当前滚动距离。
• scrollWidth 元素的属性，表示元素内部的滚动内容的宽度，一般来说会大于等于元素宽度。
• scrollHeight 元素的属性，表示元素内部的滚动内容的高度，一般来说会大于等于元素高度。
• scroll(x, y) 使得元素滚动到特定的位置，有别名 scrollTo，支持传入配置型参数 {top, left}。
• scrollBy(x, y) 使得元素滚动到特定的位置，支持传入配置型参数 {top, left}。
• scrollIntoView(arg) 滚动元素所在的父元素，使得元素滚动到可见区域，可以通过 arg 来指定滚到中间、开始或者就近。

布局

全局尺寸信息

• window.innerHeight, window.innerWidth 这两个属性表示视口的大小
• window.devicePixelRatio 这个属性非常重要，表示物理像素和 CSS 像素单位的倍率关系，Retina 屏这个值是 2，后来也出现了一些 3 倍的 Android 屏。

元素的布局信息

• getClientRects(),返回一个列表，里面包含元素对应的每一个盒所占据的客户端矩形区域，这里每一个矩形区域可以用 x, y, width, height 来获取它的位置和尺寸。
• getBoundingClientRect()