BOM 属性

@Properties

Window

Window 是顶级对象

属性和事件在使用时，可以略去window关键字。如属性scrollY；方法：alert、prompt、setTimeout、setInterval等

部分属性、方法和DOM的属性功能相同，可以根据需求选择

更多 window 属性，请访问 window - properties

innerWidth、innerHeight

浏览器内容区的宽度、高度，包括滚动条，不包括标签页、菜单栏、地址栏和状态栏

使用 resize 事件，在开发者视图中查看浏览器窗口调整时的情况

window.addEventListener('resize', () => {
    console.log(window.innerWidth, window.innerHeight);
})

location

包括当前页面 host、hostname、href、pathname、port、protocol 等一系列属性

可读、可写

利用 href 属性可以实现页面跳转

<a> 标签跳转 | 脚本跳转

console.log(window.location);

navigator

"Netscape" 是 IE11、Chrome、Firefox 以及 Safari 的应用程序名称的统称。

客户端/浏览器的相关属性

console.log(window.navigator);

history

浏览器访问历史

history.back() - 等同于在浏览器点击后退按钮

history.forward() - 等同于在浏览器中点击前进按钮

更多信息，请查看浏览器 - History 对象

console.log(window.history);

在开发者视图中查看当前页面 location、history、Navigator 信息，并使用 history 前进 forward() 和后退 back() 浏览页面

scrollX、scrollY

文档水平或垂直滚动的距离

对应的别名是：pageXOffset、pageYOffset

[] 根据页面的滚动，添加特定效果；如显式菜单、转换菜单

window.addEventListener("scroll",  () => {
  let header = document.querySelector("header");
  header.classList.toggle("active", window.scrollY > 200);
})

header {
  position: sticky;
  top: 0;
  width: 100%;
  max-width: 1280px;
  background-color: #fff;
  transition: .4s;
  z-index: 99;
}

header.hover {
  background-color: #111;
}

DOM的 scrollTop：元素内部滚动条的滚动位置，而不是视口的滚动位置。它是相对于元素内容滚动的距离

页面滚动检测使用 scrollY 或 pageYOffset

元素滚动检测使用 scrollTop

screenX、screenY

浏览器视口的左边到屏幕左边的距离
使用较少；浏览器窗口化时，可能用到
distance from the left border of the user's browser viewport to the left side of the screen

[] 复制代码

结构 - 固定形式，便于共享

<pre>
  <span class="copy">copy</span>
  // code here
</pre>

逻辑 - 获取所有 .copy 元素并分配事件；在事件处理函数中获取当前元素的下一个兄弟节点的文本内容 textContent，最后复制文本内容到剪贴板

let copy = document.querySelectorAll('.copy')
copy.forEach(item => {
  item.addEventListener('click', () => {
    console.log(item.nextSibling.textContent);
    navigator.clipboard.writeText(item.nextSibling.textContent)
  })
})

样式 - 绝对定位在 pre 右上方；略