BOM 复习

未深爱
140 阅读3分钟

[TOC]

BOM 概述

BOM 缺乏标准

window 对象的常见事件

  • alert()
  • window.onload()

    文档内容加载完毕之后触发

  • windows.onresize()

    敞口尺寸变化时触发

定时器

  • window.setTimeout()

    一次性

  • window.clearTimeout()

    清除定时器,需要标识符

  • window.setInterval()

    重复执行

  • clearInterval()

js 执行机制

this 指向问题

普通函数指向调用者

同步和异步任务

  • 同步任务

    同步任务都在主线程上执行，形成一个执行栈

  • 异步任务

    异步任务相关回调函数添加到任务队列中（也称为消息队列）

    • 普通事件 click,resize 等
    • 资源加载 load,error 等
    • 定时器

执行机制

先执行执行栈中的同步任务后执行任务队列的异步任务

location 对象

window 对象给我们提供了一个 localtion 属性用于获取或设置窗体的 URL,并且可以用于解析 URL,因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象

location 对象的属性

location 对象属性返回值
location.href获取或设置 整个 URL
location.host返回主机域名
location.port返回端口号，如未写则返回空字符串
location.pathname返回路径
location.search返回参数
location.hash返回片段 #后面内容 常用于描点 链接

location 对象的常用方法

location 对象方法返回值
location.assign()和 href 一样，可以跳转页面（也称为重定向页面）
location.replace()替换当前页面，不记录历史
location.reload()重新加载页面，true 为强制刷新

navigator 对象

包含了浏览器相关的信息，他有很多属性，

history 对象

记录浏览器历史记录

history 方法返回值
back()可以后退
forward()前进功能
go(参数)前进后退功能 参数如果是 1 前进 1 个页面，如果是-1 后退 1 个页面

元素偏移量 offset 系列

可以动态得到该元素的位置（偏移），大小等。

  • 获得元素距离带有定位父元素的位置
  • 获得元素自身的大小（宽度高度）
  • 返回的数值不带单位

offset 常见属性

offest 系列属性作用
element.offsetParent返回作为该元素带有定位的父级元素，如果父级元素都没有定位则返回 body
element.offsetTop返回元素相对带有定位父元素上方的偏移
element.offsetLeft返回元素相对带有定位父元素左边的偏移
element.offsetWidth返回自身包括 padding,border,content 的宽度，不带单位
element.offsetHeight返回自身包括 padding,border,content 的高度，不带单位
<style>
  * {
    padding: 0;
    margin: 0;
  }

  .box {
    height: 200px;
    width: 200px;
    background-color: #ccc;
    margin: 50px 0 0 50px;
  }
</style>

<div class="box"></div>
<script>
  let box = document.querySelector(".box");
  console.log(box.offsetWidth);
  console.log(box.offsetHeight);
  console.log(box.offsetTop);
  console.log(box.offsetLeft);
</script>

<!-- 输出
200
200
50
50
-->

offset 与 style 的区别

offsetstyle
offset 可以得到任意样式表中的样式值style 只能得到行内样式表中的样式值
offset 系列获取到的数值无单位style 获取到的数值为有单位的字符串
offset 包含 border padding content 的宽高style 只能得到 content 的宽高
offset 的宽高为只读属性style 宽高为可读写属性

元素可视区 client 系列

获取元素可是去相关信息

client 系列属性作用
element.clientTop返回元素上边框的大小
element.clientLeft返回元素左边框的大小
element.clientWidth返回自身包括 padding,内容区的宽度，不包含边框，不带单位
element.clientHeight返回自身包括 padding,内容区的高度，不包含边框，不带单位

元素滚动 scroll 系列

scroll 系列属性作用
element.scrollTop返回被卷去的上侧距离，不带单位
element.scrollLeft返回被卷去的左侧距离，不带单位
element.scrolWidth返回自身实际的宽度，不含边框，不带单位
element.scrollHeight返回自身实际的高度，不带边框，不带单位
avatar
文章
阅读
粉丝