他给js提供了可以操作浏览器的实现
BOM可以做什么?
-
可以操作window对象
-
提供导航对象
-
提供定位对象
-
提供了历史对象
-
提供了屏幕对象
window: 它是最顶层的对象:
-
document 文档对象 : 对应 页面
-
Loction 定位对象 : 对应 地址栏
-
histroy 历史对象 : 对应 向前 向后和刷新的那个按钮
-
Navigator 导航对象 : 对应 客户端浏览器的信息(比如:浏览器的类型, 浏览器的版本等等的)
-
Screen 屏幕对象 : 对应 屏幕
-
frame 框架对象 (*** 用的不多)
window对象的方法
//当调用window对象的方法时 window是可以省略的 //------警告框----- window.alert("警告文字"); // -----确认框( 当点击确认是 返回true 点击取消时 返回 false)---- let result = window.confirm("确定要删除吗?"); // ----输入框-----(很少用,基本不用) let result = prompt("请输出一个整数"); // 凡是从客户端获得数据都是一个字符串,参与运算花,都需要数据类型转换 // ---open--- 方法: 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口 /* open 有4个参数,都是可选的: 1 url: 链接的网页的地址 2 name: 窗体的名字 主要是用于超链接中的 target属性。 3 窗口的特征: 用来设置窗体的大小,位置,显示内容等等 4 换浏览历史中的当前条目(基本不用) */ // 当打开一个窗体的时候 它会返回一个新的窗体对象 let new_window = window.open("网页地址","窗体名字","窗体特征"); // --close()-- 关闭窗体: 一定要确定你关闭的是哪一个窗体 // 时间间隔函数 window.setInterval() window.setTimeout() // 当启动 时间间隔函数 时 该函数会返回一个 时间id 给我们。我们可以用来取消时间间隔函数 // --------开启时间间隔-------------- // setInterval() // 按照指定的周期(以毫秒计)来调用函数或计算表达式。 每隔多少毫秒执行一次,(它会重复执行) // setTimeout() //在指定的毫秒数后调用函数或计算表达式。 多少毫秒后执行一次( 它值执行一次) //--------清理时间间隔--------------- clearInterval( 时间id ) clearTimeout(时间id)
window对象的属性
//获得窗体的内部和外部的高度和宽度 window.innerWidth window.innerHeight // 窗体可视区域的宽度和高度 window.outerWidth window.outerHeight // 窗体和宽度和高度 document.documentElement.clientWidth document.documentElement.clientHeight //窗体可视区域的宽度和高度,不属于window但是简单 //opener 返回对创建此窗口的窗口的引用。
Location
Location对象 : 该对象主要是操作浏览器中的地址栏的
Location 对象包含有关 当前 URL 的信息。
Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。
一个完整的url地址的组成部分:
-
协议: http://
http : 超文本传输协议 (http协议其实就是tcp/ip协议的封装)
https : 超文本传输协议(安全机制的)
tcp/ip: 互联网协议
ftp: 文件传输协议
smtp: 简单邮件传输协议
-
主机地址: localhost:8080(127.0.0.1:8080) ip地址+端口号
一台电脑上可以安装多个服务器
-
主机下的项目的名称
-
项目的名称下面的资源
-
查询字符串 作用: 传递参数给网后台使用的。 ? 多个参数使用 & 符号.
url与uri
url: 统一资源定位符 作用: 用来获得和访问互联网上的资源
uri: 统一资源标识符 uri 可以认为他是url的一个组成部分: 除去了 协议和主机地址后面的部分 就是 uri
Location的使用
// 如何获得location对象 var locationObj = window.location; //操作location对象的属性 //获得主机地址 var host_val = locationObj.host; //获得主机名 var hostname = locationObj.hostname; //获得端口号 var port_val = locationObj.port; //获得地址栏上的完整的url 地址( 常用 常用 常常用****) var url_val = locationObj.href; //获得路径部分(uri) var path_val = locationObj.pathname; //获得协议 var protocol_val = locationObj.protocol; //获得查询字符串 var str = locationObj.search;
location的方法
//assign() 加载新的文档。 它跳转页面时 会产生历史记录。 window.location.assign("https://www.baidu.com"); //reload(布尔值) 刷新 如果 设置为 true 则表示一直从服务器上获取。 window.location.reload(); //replace() 可用一个新文档取代当前文档。 它跳转页面时 不不不会产生历史记录。 window.location.replace("https://www.baidu.com"); // 跳转我们常用设置 href属性的方法。 window.location.href="https://www.baidu.com"; //window.location.href="#";不跳转