DOM & BOM 位置相关属性总结

DOM & BOM 位置相关属性总结

一、BOM (Browser Object Model)

BOM 主要用于与浏览器窗口及其外部环境交互，涉及窗口尺寸、滚动位置、屏幕信息等。

1. 窗口尺寸与滚动

• window.scrollX 和 window.scrollY

  • 含义：

    • scrollX：文档的水平滚动偏移量。
    • scrollY：文档的垂直滚动偏移量。

  • 相对于：文档的左上角。表示文档左上角相对于当前视口的偏移量。

• window.innerWidth 和 window.innerHeight

  • 含义：

    • innerWidth：浏览器窗口中视口的宽度（包括滚动条，但不包括工具栏等界面元素）。
    • innerHeight：浏览器窗口中视口的高度。

  • 相对于：浏览器的可视区域。

• window.outerWidth 和 window.outerHeight

  • 含义：

    • outerWidth：浏览器窗口的整体宽度（包括边框、工具栏等）。
    • outerHeight：浏览器窗口的整体高度。

  • 相对于：整个浏览器窗口，包括所有界面元素。

2. 屏幕相关属性

• window.screen 对象

  • 提供关于用户屏幕的信息。

• screen.width 和 screen.height

  • 含义：

    • width：屏幕的总宽度（以像素为单位）。
    • height：屏幕的总高度。

  • 相对于：整个物理屏幕。

• screen.availWidth 和 screen.availHeight

  • 含义：

    • availWidth：屏幕可用的宽度，减去操作系统任务栏等占用的空间。
    • availHeight：屏幕可用的高度。

  • 相对于：屏幕的可用工作区域。

• screen.colorDepth 和 screen.pixelDepth

  • 含义：

    • colorDepth：屏幕显示的颜色深度（每像素位数）。
    • pixelDepth：屏幕像素深度，通常与 colorDepth 相同。

  • 相对于：屏幕显示能力。

3. 窗口位置

• window.screenX 和 window.screenY

  • 含义：

    • screenX：浏览器窗口左上角相对于屏幕左边缘的水平距离。
    • screenY：浏览器窗口左上角相对于屏幕顶边缘的垂直距离。

  • 相对于：整个物理屏幕。

---

二、DOM (Document Object Model)

DOM 主要用于操作和获取网页内容及其结构，涉及元素的几何位置、大小、滚动等。

1. 元素的几何属性

• element.offsetLeft 和 element.offsetTop

  • 含义：

    • offsetLeft：元素左边缘到其最近的定位祖先元素（offsetParent）的左边缘的距离。
    • offsetTop：元素上边缘到其最近的定位祖先元素的上边缘的距离。

  • 相对于：offsetParent，即最近的已定位（position 非 static）的祖先元素。

• element.offsetWidth 和 element.offsetHeight

  • 含义：

    • offsetWidth：元素的完整宽度，包括内容、内边距（padding）、边框（border）和滚动条（如果有）。
    • offsetHeight：元素的完整高度，同上。

  • 相对于：元素的边框盒（border box）。

• element.clientWidth 和 element.clientHeight

  • 含义：

    • clientWidth：元素的内容宽度加上内边距，不包括边框、外边距和滚动条。
    • clientHeight：元素的内容高度加上内边距。

  • 相对于：元素的内容区（content area），即不包括边框和滚动条。

• element.scrollLeft 和 element.scrollTop

  • 含义：

    • scrollLeft：元素的水平滚动偏移量，表示内容在水平方向上滚动的距离。
    • scrollTop：元素的垂直滚动偏移量，表示内容在垂直方向上滚动的距离。

  • 相对于：元素内容的左上角，表示滚动内容相对于可视区域的偏移量。

2. 包围盒相关属性

• element.getBoundingClientRect() 方法

  • 含义：返回元素的包围盒，即元素的边界矩形。
  • 返回值：一个 DOMRect 对象，包含 top、right、bottom、left、width 和 height 属性。
  • 相对于：视口（viewport）的左上角。例如，top 和 left 表示元素边界相对于视口左上角的位置。

3. 元素位置相关属性

• element.clientLeft 和 element.clientTop

  • 含义：

    • clientLeft：元素左边框的宽度。
    • clientTop：元素上边框的宽度。

  • 相对于：元素的内容区，用于计算边框的偏移量。

• element.scrollWidth 和 element.scrollHeight

  • 含义：

    • scrollWidth：元素内容的整体宽度，包括不可见部分（即通过滚动可以看到的部分）。
    • scrollHeight：元素内容的整体高度。

  • 相对于：元素的内容区，用于确定滚动范围。

---

三、Screen 对象

Screen 对象提供了关于用户屏幕的信息，常用于了解屏幕尺寸、颜色深度等。

1. 基本屏幕信息

• screen.width 和 screen.height

  • 含义：

    • width：屏幕的总宽度（像素）。
    • height：屏幕的总高度（像素）。

  • 相对于：整个物理屏幕。

• screen.availWidth 和 screen.availHeight

  • 含义：

    • availWidth：屏幕的可用宽度，减去任务栏等系统占用的空间。
    • availHeight：屏幕的可用高度。

  • 相对于：屏幕的可用工作区域。

2. 屏幕颜色深度

• screen.colorDepth 和 screen.pixelDepth

  • 含义：

    • colorDepth：屏幕显示的颜色深度，即每像素的位数（如 24 位）。
    • pixelDepth：屏幕的像素深度，通常与 colorDepth 相同。

  • 相对于：屏幕的显示能力。

---

四、事件相关属性

在处理鼠标或触摸事件时，常用的坐标属性包括 screenX、screenY、clientX、clientY、pageX、pageY 等。

1. 坐标属性

• event.screenX 和 event.screenY

  • 含义：

    • screenX：事件发生时，鼠标指针相对于整个屏幕左上角的水平坐标。
    • screenY：事件发生时，鼠标指针相对于整个屏幕左上角的垂直坐标。

  • 相对于：整个物理屏幕。

• event.clientX 和 event.clientY

  • 含义：

    • clientX：事件发生时，鼠标指针相对于视口左上角的水平坐标。
    • clientY：事件发生时，鼠标指针相对于视口左上角的垂直坐标。

  • 相对于：视口（viewport）的左上角。

• event.pageX 和 event.pageY

  • 含义：

    • pageX：事件发生时，鼠标指针相对于整个文档左上角的水平坐标（包括滚动偏移）。
    • pageY：事件发生时，鼠标指针相对于整个文档左上角的垂直坐标。

  • 相对于：整个文档（Document）的左上角，包括页面滚动。

---

五、总结

1. BOM 属性

• 滚动与窗口尺寸：

  • scrollX、scrollY 相对于 文档左上角。
  • innerWidth、innerHeight 相对于 浏览器的可视区域。
  • outerWidth、outerHeight 相对于 整个浏览器窗口。

• 屏幕信息：

  • screen.width、screen.height 相对于 整个物理屏幕。
  • screen.availWidth、screen.availHeight 相对于 屏幕的可用工作区域。
  • screen.colorDepth、screen.pixelDepth 描述 屏幕显示能力。

• 窗口位置：

  • screenX、screenY 相对于 整个物理屏幕。

2. DOM 属性

• 元素几何：

  • offsetLeft、offsetTop 相对于 offsetParent。
  • offsetWidth、offsetHeight 相对于 元素的边框盒。
  • clientWidth、clientHeight 相对于 元素的内容区。

• 滚动与内容：

  • scrollLeft、scrollTop 相对于 元素内容的左上角。
  • scrollWidth、scrollHeight 表示 内容的整体尺寸。

• 包围盒：

  • getBoundingClientRect() 返回的坐标相对于 视口的左上角。

3. 事件属性

• 坐标参考：

  • screenX、screenY 相对于 整个屏幕。
  • clientX、clientY 相对于 视口的左上角。
  • pageX、pageY 相对于 整个文档的左上角。