web API -- 顶级对象window、location对象、history对象、onload事件、offse知识

布兰妮甜

于 2024-10-11 16:33:30 发布

阅读量456

点赞数 5

文章标签：前端 javascript

本文链接：https://blog.csdn.net/chaosweet/article/details/142857292

版权

佳节又重阳，玉枕纱厨，半夜凉初透

文章目录

顶级对象-window

介绍：window对象被称为顶级对象或者全局对象，因为全局变量和全局函数本质上都是window对象的属性和方法。window对象可以省略
对话框：alert(弹出框)、prompt(输入框)，confirm(确认框)
定时器：一次性定时器和反复性定时器
- 一次性定时器
  - 语法：window.setTimeout(callback，time)
  - 作用：延迟执行一段程序，仅仅执行一次(像定时炸弹)，返回一个数字，表示的是哪个定时器
  - 参数
    - callback：函数定义，函数体中存放定时器要执行的代码
    - time：等待的时间，数字，表示的是毫秒
  - 清除定时器：window.clearTimeout(定时器标识)，定时器标识就是创建定时器时候的变量名
- 反复性定时器
  - 语法：window.setInterval(callback，time)
  - 作用：延迟执行一段程序，重复执行(像闹钟)，返回一个数字，表示的是哪个定时器
  - 参数
    - callback：函数定义，函数体中存放定时器要执行的代码
    - time：等待的时间，数字，表示的是毫秒
  - 清除定时器：window.clearInterval(定时器标识)

location对象

作用：用来操作浏览器的地址栏
属性：location.href (设置或获取地址栏地址)
方法：location.reload() 刷新页面，location.assign() 会产生历史记录，location.replace() 不会产生历史记录

history对象

history.back()：返回历史记录前一个
history.forward()：前进历史记录下一个
history.go(-2)：跳转历史记录

onload事件

作用：是页面加载事件，一般绑定给window (当页面加载完成之后的事件)

window.onload = function () {
  let box = document.getElementById('box')
  console.log(box)
}
let divs = document.getElementsByTagName('div')
console.log(divs)

元素的offset系列元素

获取元素的大小：元素.offsetWidth / 元素.offsetHeight

返回的是数字大小 (大小包含：内容 + padding + border)

<div></div>
<input type="button" value="点击">
<script>
  let btn = document.querySelector('input')
	let div = document.querySelector('div')
  btn.onclick = function () {
    div.style.width = '200px'
    console.log(div.offsetWidth)
    console.log(div.offsetHeight)
  }
</script>

注意：该属性仅仅只能够读取,不能够设置

获取元素的位置：元素.offsetLeft / 元素.offsetTop

返回的是数字  (参照谁,看定位关系)
元素.offsetParent: 获取父元素 [获取的是定位元素]
元素.parentNode: 获取父元素 [获取的是标签父元素]

<script>
	let s = document.querySelector('.s')
  console.log(s.offsetLeft)
  console.log(s.offsetTop)
  s.offsetLeft = 500
  s.offTop = 500
  // 获取父元素
  console.log(s.parentNode)   // 获取的是标签父元素
  console.log(s.offsetParent) // 获取的是定位父元素
</script>