BOM
定义
什么是BOM：browser，object，model：浏览器对象模型
浏览器对象：一系列浏览器内置对象的统称
浏览器对象模型：内置对象之间按照某种层次组织起来的结构
作用
可以操作浏览器窗口及浏览器窗口中的控件（标签）：即可以在JS程序中操作标签
实现页面和用户之间的动态交互
BOM对象
window对象：浏览器的窗口对象，是BOM的核心，BOM的其他内置对象可以作为window的属性
document对象：文档对象，是DOM的核心
location对象：地址对象，浏览器的地址栏
history对象：历史对象。用来记录浏览器的访问记录，可以实现前进和后退
navigator对象：浏览器对象，又称为浏览器的嗅探器。通过它可以得到浏览器的版本信息、名称、内核信息
screen对象：屏幕对象。用于获取和屏幕有关的数据，例如屏幕分辨率
window对象
可以作为BOM其他对象的父对象
全局作用域：在JavaScript中定义的变量、函数以及JavaScript的内置函数都可以被window对象调用
注意的问题
window对象的属性和方法的访问：window.属性名/window.方法名()---window可以省略
在全局作用域中使用this代表window对象
若使用“window.变量名”访问某个未声明的变量时，该变量就是undefined
常用方法
alert('字符串'):弹出消息提示框(只有一个按钮)
prompt(参数1，参数2)：带输入的消息框
参数1：表示提示的字符串
参数2：表示输入框的默认值
当用户点击'确定'按钮时，函数返回用户输入的数据；当用户点击"取消"按钮时，不返回值
confirm(参数)：确认消息框
参数：表示提示字符串
当用户点击"确定"按钮时，返回true；点击"取消按钮时，返回false
open(url,name.spaces,replace):打开一个窗口。表示url代表的页面在窗口中打开
url：页面地址
name：表示窗口对象
_blank：在新窗口中打开页面
_self：在当前窗口中打开页面
parent：表示在父框架中打开页面
spaces：表示窗口特征（大小，是否状态栏，是否有工具栏）
replace：默认值为true，表示是否替换默认条目
事件处理
事件：用户在页面中进行的某种操作
单击事件名：click -- onclick（动作）
页面加载事件名：load -- onload（动作）
事件处理程序：某个事件发生时执行的程序
document对象获取页面元素（标签）的方法
getElementByID(标签的id属性值)：浏览器都支持
querySelector()
通过id选择：document.querySelector('#id')
通过class选择：document.querySelector('.class')
通过标签名选择：document.querySelector('标签名')
事件监听
直接在标签中监听
<button οnclick="show()">开始</button> 监听click事件
<body οnlοad=""> 监听页面的加载事件load
在JavaScript程序中调用addEventListener函数来注册
控件名.addEventListener('事件名',fn)
参数fn：是一个函数，表示事件处理程序
定时器函数
setTimeout(fn,times)：间隔times毫秒后执行fn函数
fn：是一个函数
times：间隔的时间，单位是毫秒
函数的返回值是一个定时器对象
cleanTimeout清除创建的定时器
setInterval(fn，times)；每间隔times毫秒后执行fn函数
(1)、获取按钮
let start = document.getElementById('btn_start');
(2)、给按钮注册事件监听
var timer = null; start.addEventListener('click',function(){ timer = setInterval(function(){ console.log('hello world'); },2000) })
clearinterval(定时器对象)
标签的属性
innerHTML属性:代表标签的html内容（代表起始标签和结束标签之间的内容
input标签的value属性
要点
在页面加载完成后即可显示时间的办法
先调用函数
使用事件后：load---当浏览器加载页面时触发该事件
<body οnlοad="showTime()">表示当页面加载时就显示showTime
事件的注册方式
写在页面的标签中： //<button οnclick="函数名()"></button>
使用addEventListener注册： //控件名(对象名).addEventListener('事件名'，事件处理函数)
使用函数表达式
函数表达式：let/var 变量名 = function([参数]){}
注册事件的方式： //对象名.onclick = function([参数]){}
由JavaScript控制复选方法
复选框组：将所有复选框的name属性值定义成一样的
复选框的事件：change --- 当复选框的状态发生改变时触发
window对象的其他函数
open函数：打开一个窗口 //open(url,name,specs,replace)
（1）url：统一资源定位符（网址），格式：
协议：//主机名：端口号/文件路径
http：超文本传输控制协议，是一个无状态的协议。直接运行在TCP协议之上
https:SSL，是安全的超文本控制协议。运行在SSL之上，SSL运行在TCP之上
（2）name：
open函数返回第一个窗口对象。将该对象赋给变量myWindow
myWindow.name：打开的窗口的name属性---‘newwin’
name属性：表示窗口对象的名称
window.parent.location：
window：指的是新开的窗口中的BOM的window对象
parent：上面window对象的属性，代表的是外层的窗口
location：代表的是外层窗口的浏览器地址栏
myWindow是新打开的窗口对象
）close()函数：用来关闭窗口对象
myWindow.closed：closed是窗口对象的属性。若窗口对象关闭该属性值为true，否则返回false
window对象的属性
innerHeight/innerWidth：返回窗口的文档显示区的宽度和高度
outerHeight/outerWidth：返回窗口外部的高度和宽度
location对象：是浏览器的地址栏
url：统一资源定位符
IP：网际协议
IP地址：是计算机在互联网上的唯一标识
IP地址的编址方式： //IPV4：点分十进制：192.168.1.125.每位最大255 //IPV6：冒号十六进制：00::A1::B6::CF
location对象的方法
assign(url)：载入新的文档
reload(true/false)：重新载入当前文档
replace(url):用新的文档替换当前文档
location对象的属性
herf:表示url地址
history对象
可以对浏览器访问过的URL历史记录进行操作
出于安全方面的考虑，history对象不能直接获取用户浏览过的URL，但可以控制浏览器实现“后退”和“前进”的功能
属性：length---历史列表中的网址数
方法
go(整数)：加载历史列表中某个具体页面。正整数表示前进，负整数表示回退
back()：表示后退，加载历史列表中的前一个网址
forward():表示前进，加载历史列表中下一个网址
navigator对象
是浏览器的嗅探器，保存的是浏览器的详细信息
appCodeName：浏览器的内部名称
appName:浏览器的名称
appVersion：浏览器的版本
platform：运行浏览器的操作平台
userAgent：由客户端发送服务器的User-Agent头部的值
screen对象
width/height：返回屏幕的宽度和高度
BOM思维导图
213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
