JS 中的 BOM 操作--一套操作浏览器相关内容的属性和方法

BOM 操作–一套操作浏览器相关内容的属性和方法

• 特点：
  • 所有 BOM 操作在不同浏览器中表现形式不一样

1.获取浏览器可视窗口大小

• 高度： window.innerWidth
• 宽度： window.innerheight

2.浏览器弹出层

弹出层的特点

• 都会阻断浏览器页面渲染的继续执行
• 都会阻断 WEBSPI 的工作
  • WEBSPI 工作
    • 分析代码

2.1 提示框

• 语法：window.alert(提示文本内容)
• 表现：一个弹框 + 提示文本 + 确定按钮
• 返回值：没有

2.2 确认框

• 语法：window.confirm（提示文本内容）
• 表现：在 alert 的基础上 + 取消按钮
• 返回值：一个布尔值
  • 如果点击 确定 就是 true
  • 如果点击 取消 就是 false

2.3 输入框

• 语法：windew.prompt（提示文本内容）
• 表现：在 confirm 的基础上 + 输入框
• 返回值：
  • 点击的确定，就是返回输入的内容
  • 点击的取消，就是 null

3.浏览器的地址栏

3.1 href

• 读：获取当前页面的完整地址
  • 语法：window.location.href
• 写：设置当前页面的浏览器地址
  • 语法：window.location.href = ‘值’

3.2 reload

• 语法：window.location.reload()
• 作用：重新加载当前页面
• 注意：不要书写在打开页面就能执行的位置

4.浏览器的标签页

4.1 打开新的标签页

• 语法：window.open（地址）
• 作用：打开新的标签页，新的地址

4.2 关闭当前标签页

• 语法：window.close（）
• 作用：关闭当前标签页

5.浏览器卷去的尺寸

5.1 卷曲的高度

• 语法：
  • document.documentElement.scrollTop
    • 有 DOCTYPE 标签的时候，能获取到尺寸
  • document.body.scrollTop
    • 没有 DOCTYPE 标签的时候，能获取到尺寸
• 兼容：
  • 使用 || 的短路运算
    • var scrollTop = document.documentElement.scrollTop || document.body.scrollTop

5.2 卷曲的宽度

• 语法：
  • document.documentElement.scrollLeft
    • 有 DOCTPE 标签的时候，能获取到尺寸
  • document.body.scrollLeft
    • 没有 DOCTYPE 标签的时候，能获取到尺寸
• 兼容：
  • 使用 || 的短路运算
    • var scrollTop = document.documentElement.scrollLeft || document.body.scrollLeft

6.浏览器的常见事件

6.1 load

• 加载事件
• 时机：当页面所有外部资源（html、css、图片、视音频等）全部加载完毕后触发
• 一般：
  • 吧 js 书写在 head 标签内的时候，并且操作了页面元素
  • 需要加一个 window.onload 事件

6.2 resize

• 尺寸改变事件
• 时机：页面尺寸发生改变的时候，触发

6.3 scroll

• 滚动事件
• 时机：当页面滚动条滚动的时候触发

7.浏览器滚动事件

• 语法：
  • window.scrollTo（）
    • 传参数字
      • window.scrollTo（x，y）
      • x 表示横向，y 表示纵向
      • 必须穿两个，传一个报错
    • 传对象
      • window。scrollTo（{
        top:yyy,
        left:xxx,
        behavior:‘smooth’
        }）
      • 默认瞬间定位，需要一个 key 叫做 behavior 来决定平滑效果