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:返回屏幕的宽度和高度
10-25
562
10-30
113
10-29
11-22
10-29
432
01-18
1407