Javascript--BOM相关的基本概念

桃子耶耶

已于 2022-08-25 20:11:08 修改

阅读量194

点赞数 1

文章标签： javascript 前端开发语言

于 2022-08-25 20:08:35 首次发布

本文链接：https://blog.csdn.net/m0_46677484/article/details/126531151

版权

BOM

虽然 ECMAScript 把浏览器对象模型（BOM，Browser Object Model）描述为JavaScript 的核心，但实际上 BOM 是使用 JavaScript 开发 Web 应用程序的核心。

名称	描述
BOM	浏览器对象模型（Browser Object Model），是 js 与浏览器窗口交互的接口
window	window 对象表示浏览器中打开的窗口，注意事项： 1、这个窗口中包含 DOM 结构，window.document 属性就表示 document 对象 2、全局变量会成为 window 对象的属性 3、内置函数普遍是 window 的方法，如：alert(),confirm(),prompt()等方法
history	history 对象包含用户（在浏览器窗口中）访问过的 URL，是 window 对象的一部分，可通过 window.history 属性对其进行访问
location	location对象包含有关当前URL的信息，是window对象的一个部分，可通过window.location属性来访问。
navigator	navigator对象含有浏览器的信息，是window对象的一个部分，可通过window.navigator属性访问

window 对象的常用属性

BOM 的核心是 window 对象，表示浏览器的实例。window 对象在浏览器中有两重身份，一个是ECMAScript 中的 Global 对象，另一个就是浏览器窗口的 JavaScript 接口。这意味着网页中定义的所有对象、变量和函数都以 window 作为其 Global 对象，都可以访问其上定义全局方法。

名称	属性
innerHeight	返回浏览器窗口的内容区域的高度，包含水平滚动条的高度
innerWidth	返回浏览器窗口的内容区域的宽度，包含垂直滚动条的宽度
document.documentElement.clientWidth	返回浏览器窗口的内容区域的宽度，不包含滚动条
scrollY	返回文档当前垂直滚动的距离
document.documentElement.scrollTop	要获取当前页面的滚动条纵坐标位置

window 对象的常用事件

名称	描述
onresize	监听窗口改变大小事件
onscroll	监听窗口滚动事件

history 对象的常用方法

该对象保存着用户上网的历史记录。

名称	描述
back()	表示回退到浏览器历史记录里的上一页，等同于点击浏览器回退按钮
go(-1)	与history作用一样，加载 history 列表中的某个具体页面，负数表示向后跳转，正数表示向前跳转。
forward()	加载 history 列表中的下一个 URL
length	返回历史列表中的网址数注意：Internet Explorer和Opera从0开始，而Firefox、Chrome和Safari从1开始。

location 对象的常用属性和方法

location对象是最有用的BOM对象之一，提供了与当前窗口中加载的文档有关的信息，还提供一些导航功能。

location是个神奇的对象，既是window的对象也是document的对象。经过我们的对比发现，直接使用location对象也可以。

名称	描述
href	设置或返回完整的ULR地址
search	设置或返回(?)开始的URL(查询部分)
host	返回服务器名称和端口号
hostname	返回不带端口号的服务器名称
pathname	返回URL的目录和文件名
port	返回URL中指定的端口号
protocol	返回页面使用的协议
reload()	重新加载当前页面。参数可以为boolean类型，默认为false，表示以最有效方式重新加载，可能从缓存中直接加载。如果参数为true，强制从服务器中重新加载。
assign()	传递一个URL参数，打开新的URL，并在浏览记录中生成一天记录
replace()	参数为URL，结果会导致浏览器位置改变，但不会再历史记录中生成新的记录。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

<button>跳转页面</button>
<button>替换页面</button>
<button>刷新页面</button>
</body>
</html>
<script>

console.log(window.location === document.location); //true
  console.log(location === document.location);	//true
  console.log(location === window.location);	//true



  var btn = document.getElementsByTagName('button');
  btn[0].onclick = function () {
    location.assign('./test2.html')
  }
  btn[1].onclick = function () {
    location.replace('./test2.html')
  }
  btn[2].onclick = function () {
    location.reload()
  }
</script>

navigator 对象的常用属性

名称	描述
appName	返回浏览器官网名称
appVersion	返回浏览器版本
userAgent	返回浏览器的用户代理信息
platform	返回用户操作系统

桃子耶耶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript--BOM相关的基本概念

BOM 的核心是 window 对象，表示浏览器的实例。window 对象在浏览器中有两重身份，一个是ECMAScript 中的 Global 对象，另一个就是浏览器窗口的 JavaScript 接口。这意味着网页中定义的所有对象、变量和函数都以 window 作为其 Global 对象，都可以访问其上定义全局方法。location是个神奇的对象，既是window的对象也是document的对象。location对象是最有用的BOM对象之一，提供了与当前窗口中加载的文档有关的信息，还提供一些导航功能。...
复制链接

扫一扫