【JavaScript】19.浏览器对象模型补充

这是我参与8月更文挑战的第31天，活动详情查看：8月更文挑战

---

浏览器对象模型补充

01.元素偏移量 ——offset

（1）概述

• offset：偏移量，可以得到元素的位置（偏移）、大小
  • 获取元素相对于父元素的偏移量
    • 【注意】父元素需要定位，如果没有定位，则找到有定位的祖先元素，直到body
  • 获取元素自身的大小（宽高）
  • offset偏移量返回的是数值，不带单位

（2）常见属性

属性	作用
element.offsetParent	返回目标元素带有定位的父级元素，没有则向上一级查找（就近原则），直到body
element.offsetTop	返回元素相对于**父元素（有定位）**上方的偏移量
element.offsetLeft	返回元素相对于**父元素（有定位）**左边框的偏移量
element.offsetWidth	返回自身的宽度（padding+border+content）
element.offsetHeight	返回自身的高度（padding+border+content）

var son = document.querySelector(".father")

console.log(son.offsetParent)	//	返回son的father，如果father没有定位,则返回body

（3）offset与style的区别

offset	style
offset可以获取任意样式表中的样式值	style只能获取行内样式表中的样式值
offset获取的数值没有单位	style.width获取带有单位的字符串
offsetwidth包含 padding+border	style.width获得不包含 padding+border
offset~属性是只读属性，只能获取不能赋值	style.width是可读写属性，可以获取也可以赋值

• 总结：如果是要获取元素的大小、位置，则用offset ；如果是要给元素更改值，则需要用style

---

02.元素可视区——client

（1）概述

• client：获取元素可视区的相关信息，可以动态的得到元素的边框大小、元素大小等

（2）常见属性

属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回元素宽度（padding+content）
element.clientHeight	返回元素高度（padding+content）

---

03.元素滚动 scro‖

（1）概述

• scro‖：滚动的，可以得到该元素的大小、滚动距离等

（2）常见属性

属性	作用
element.scrollTop	返回元素被卷去的上侧距离（这里的元素是父元素，且子元素内容超出父元素，且父元素有滚动条）
element.scrollLeft	返回元素被卷去的左侧距离
element.scrollWidth	返回元素自身实际的宽度（content）(以内容大小为准，即便溢出)
element.scrollHeight	返回元素自身实际的高度（content）

（3）滚动事件

• scroll：滚动时触发的事件

  document.addEventListener("scroll", function() {
      console.log(element.scrollTop)	//滚动时，打印元素被卷去的上侧距离
  })
  
  

（4）页面卷去事件

• element.scrollTop：元素被卷去的上侧距离
• window.pageYOffset：页面被卷去的上侧距离（主要的）
• window.scrollY：页面被卷去的上侧距离，同pageYOffset

04.本地存储

（1）概念

1、数据存储在用户浏览器中

2、设互、读取方便、甚至页面刷新不丢失数据

3、容量较大， sessionstorag约 5M， localstorage约20M 4、只能存储字符串，可以将对象 SON.stringify（编码后存储）

（2）window.sessionStorage

（1）生命周期为页面在浏览器窗口的存在期间，页面关闭或者窗口关闭则数据清除

（2）在同一个窗口（页面）下数据可以共享

（3）以键值对的形式存储或者使用

• 存储数据：sessionStorage.setItem(key,value)
• 获取数据：sessionStorage.getItem(key)
• 删除数据：sessionStorage.removeItem(key)
• 删除所有数据：sessionStorage.clear()

（3）window.localStorage

（1）生命周期永久存在，除非手动删除，否则关闭页面后也会存在

（2）可以多窗口（页面）共享（同一个浏览器也可以共享这个数据）

（3）以键值对的形式存储或者使用

• 存储数据：localStorage.setItem(key,value)
• 获取数据：local.Storage.getItem(key)
• 删除数据：localStorage.removeItem(key)
• 删除所有数据：localStorage.clear()

---

本人前端小菜鸡，如有不对请谅解