一、BOM
Browser Object Model： 浏览器对象模型
BOM使 JavaScript 有能力与浏览器”对话”，尚无正式标准。
（1）可以操作浏览器窗口及浏览器窗口中的控件（标签）：即可以在JavaScript程序中操作标签
（2）实现页面和用户之间的动态交互
4. 浏览器对象模型：内置对象之间按照某种层次组织起来的结构
1. window对象：浏览器窗口对象，是BOM的核心，BOM的其他内置对象可以作为window的属性。代表的是整个浏览器的窗口，同时window也是网页中的全局对象
3. location对象：地址对象。浏览器的地址栏。代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
4. history对象：历史对象。可以通过该对象来操作浏览器的历史访问记录，可以实现前进和后退，该操作只在当次访问时有效
5. navigator对象：浏览器对象，又称为浏览器的嗅探器。通过它可以得到浏览器的版本信息、名称、内核等信息，通过该对象可以来识别不同的浏览器
6. screen对象：屏幕对象。用于获取和屏幕有关的数据。例如屏幕分辨率
这些BOM对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用。
1. 全局作用域：在javascript中定义的变量、函数及JavaScript的内置函数都可以被window对象调用
<script>
var title = '夕阳'
// console.log(title)
// console.log(window.title)
function getTitle() {
let title = '丛林'
return title
// console.log(this.title)//this代表的是window对象window.title=this.title
}
getTitle()
console.log(window.getTitle())
// console.log(window.Math.PI)
</script>注意：window.alert() 方法可以不带 window 前缀来写。
2. 注意的问题：
（1）window对象的属性和方法的访问：window.属性名 / window.方法名() —- window可以省略
（2）在全局作用域中使用的this代表window对象
function getTitle() {
let title = '丛林'
return title
// console.log(this.title)//this代表的是window对象window.title=this.title
}
getTitle()
console.log(window.getTitle()) （3）若使用“window.变量名”访问某个未声明的变量时，该变量就是undefined
3. 常用方法：
（1）警告框alert（‘字符串’）：弹出消息提示框（只有一个按钮）
如果要确保信息传递给用户，通常会使用警告框。当警告框弹出时，用户将需要单击“确定”来继续。
window.alert("Hello!");
注意：window.alert() 方法可以不带 window 前缀来写。
（2）提示框prompt(参数1，参数2)：带输入的消息框
参数1：表示提示的字符串
参数2：表示输入框的默认值
如果您希望用户在进入页面前输入值，通常会使用提示框。
当提示框弹出时，用户将不得不输入值后单击“确定”或点击“取消”来继续进行。
当用户点击’确定’按钮时，函数返回用户输入的数据；当用户点击’取消’按钮时，返回null
let t = alert('请输入一个数',0)
console.log(t) （3）确认框confirm(参数)：确认消息框
参数：表示提示字符串
当用户点击“确定”按钮时，返回true，点击“取消”按钮时，返回false
let flag = window.confirm('确定删除吗')
console.log(flag) （4）open(url，name，spaces，replace)：打开一个窗口。表示将url代表的页面在name窗口中打开
url：页面地址。可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口
name：表示窗口对象。可选。指定target属性或窗口的名称。支持以下值:
_blank：在新窗口中打开页面。这是默认
_self：在当前窗口中打开页面
_parent：表示在父框架中打开页面
window.open("http://baidu.com","_blank")
window.open("http://baidu.com","_self")
window.open("http://baidu.com","_parent") spaces：表示窗口特征（大小、是否状态栏、是否有工具栏）。可选，是一个逗号分隔的项目列表。
replace：Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值:
true-URL 替换浏览历史中的当前条目。
false-URL在浏览历史中创建新的条目。
默认值为true，表示是否替换默认条目
内联框架：ifrme
JavaScript 可以在时间间隔内执行，这就是所谓的定时事件（ Timing Events）。
window 对象允许以指定的时间间隔执行代码，这些时间间隔称为定时事件
1. 延时器 setTimeout（fn，times）：间隔times毫秒后执行fn函数
参数fn：是要执行的函数
参数times：指示执行之前的毫秒数
函数的返回值是一个延时器对象
2. 清除setTimeout创建的延时器
clearTimeout(延时器对象)
// 方式一
setTimeout(function(){
console.log('兔子')
},3000)
// 方式二
function show(){
console.log('兔子')
}
setTimeout(show,3000)
// 方式三
function show(){
console.log('兔子')
}
var timer = setTimeout(show,3000)
//清除延时器
clearTimeout(timer) 练习 单击‘清除延时器’按钮后，再次单击‘开始’按钮时就不会显示alert警告框
var timer = null
function show() {
timer = setTimeout(function () {
alert('一条数据都没有哦')
}, 3000)
}
let start = document.querySelector('#btn_start')//选择id是btn的标签（控件）
start.addEventListener('click', show)//给标签注册click事件，当click事件被触发时，执行show函数
let clear = document.querySelector('#btn_clear')
clear.addEventListener('click', end)//单击‘清除延时器’时，执行end函数
function end() {
clearTimeout(timer)//清除延时器
} 3. 定时器setInterval（fn，times）:每间隔times毫秒后执行fn函数
在每个给定的时间间隔重复给定的函数
- 参数fn是要执行的函数。
- 参数times每个执行之间的时间间隔的长度，单位是毫秒
setInterval(function(){
console.log('hahahahahahahahahahahahahaha')
},1000) 4.清除setInterval创建的定时器
clearInterval(定时器对象)
练习 元旦倒计时
<style>
#app {
width: 800px;
height: 200px;
color: red;
font-size: 20px;
margin: 10px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
//1.定义定时器函数
function showTime() {
let now = new Date()
let newYear = new Date('2023-1-1')
let times = newYear - now
// console.log(times)
let d = parseInt(times / 1000 / 60 / 60 / 24)
d = d < 10 ? '0' + d : d
let h = parseInt(times / 1000 / 60 / 60 % 24)
h = h < 10 ? '0' + h : h
let m = parseInt(times / 1000 / 60 % 60)
m = m < 10 ? '0' + m : m
let s = parseInt(times / 1000 % 60)
s = s < 10 ? '0' + s : s
let str = `距离2023年元旦还有：${d}天${h}小时${m}分钟${s}秒`
let mydiv = document.querySelector('#app')
mydiv.innerHTML = str
}
setInterval(showTime, 1000);
</script>
</body> （1）单击事件名：click —- onclick
（2）页面加载事件名：load —- onload
（1）getElementById(标签的Id属性值)：浏览器都支持
（2）querySelector()
a、通过id选择：document.querySelector(‘#id’)
b、通过class选择：document.querySelector(‘.class’)
c、通过标签名选择：document.querySelector(‘标签名’)
（1）直接在标签中监听：
1.<button onclick="show()">开始</button> //监听click事件
2.<body onload=""> //监听页面的加载事件load （2）在JavaScript程序中调用addEventListener函数来注册
控件名.addEventListener(‘事件名’，fn)
参数fn：是一个函数，表示事件处理程序
end.addEventListener('click',function(){
clearInterval(timer)
})let/var 变量名 = function（参数）{ }
注册事件的方式：
对象名.onclick = function（参数）{ }
六、标签的属性
1. innerHTML属性：代表标签的html内容（代表起始标签和结束标签之间的内容）
2. input标签的value属性
<body>
<input type="text" id="score">
<button id="btn_score">获取成绩</button>
<script>
let score = document.querySelector('#score') //input标签
let my_btn = document.querySelector('#btn_score')//按钮
my_btn.addEventListener('click', function () {
alert(score.value)
})
</script>
</body>练习 简单时钟
<style>
.box {
width: 500px;
height: 150px;
/* border: 1px solid #ccc; */
margin: 20px auto;
line-height: 150px;
text-align: center;
}
#clock {
width: 300px;
height: 100px;
border: 1px solid #ccc;
}
</style>
<body>
<div class="box">
<div id="clock"></div>
<p>
<button id="btn_start">开始</button>
</p>
</div>
<script>
//1.创建变量
var timer = null //定时器变量
var flag = true //标记变量：用来标识当前按钮是'开始'还是'暂停'
showTime()
//2.定义函数：用于显示时间
function showTime() {
//2.1、创建日期对象-- 当前日期
let now = new Date()
//2.2、取出日期的时间
let h = now.getHours()
let m = now.getMinutes()
let s = now.getSeconds()
h = h < 10 ? '0' + h : h
m = m < 10 ? '0' + m : m
s = s < 10 ? '0' + s : s
//2.3、将时间写入div中
document.getElementById('clock').innerHTML = h + ':' + m + ':' + s
}
//3.给按钮注册click事件，在事件的处理程序中创建定时器
let start = document.getElementById('btn_start')
start.addEventListener('click', function () {
//3.1、判断标记变量flag,若为true表示时间正在运行，按钮显示'暂停'
if (flag) {
timer = setInterval(showTime, 1000) //创建定时器
flag = !flag //取反
this.innerHTML = '暂停' //this代表的是当前的按钮start
} else {
clearInterval(timer) //清除定时器
flag = !flag
this.innerHTML = '开始'
}
})
</script>
</body>在页面加载完成后即刻显示时钟的解决办法：
（1）先调用函数
（2）使用事件：load —- 当浏览器加载页面时触发该事件
===> 表示当页面加载时就运行showTime函数
由JavaScript控制复选框
（1）复选框组：将所有复选框的name属性值定义成一样的
（2）复选框的事件：change —- 当复选框的状态发生改变时触发
练习 复选
<body>
<p>请选择你的爱好:</p>
<p>
<input type="checkbox" name="" id="chk_box">全选/全不选
</p>
<label><input type="checkbox" name="hobby">游泳</label>
<label><input type="checkbox" name="hobby">写代码</label>
<label><input type="checkbox" name="hobby">查BUG</label>
<label><input type="checkbox" name="hobby">打篮球</label>
<label><input type="checkbox" name="hobby">踢足球</label>
<br><br>
<button id="all">全选</button>
<button id="notAll">全不选</button>
<button id="noAll">反选</button>
<script>
//1.提取按钮
let quan = document.getElementById('all')
let not = document.getElementById('notAll')
let fan = document.getElementById('noAll')
let xuan = document.getElementById('chk_box')
//2.注册监听事件
//全选
quan.addEventListener('click', function () {
var cb_arr = document.getElementsByName('hobby')
for (let i = 0; i < cb_arr.length; i++) {
cb_arr[i].checked = true
}
})
//全不选
not.addEventListener('click', function () {
let cb_arr = document.getElementsByName('hobby')
for (let i = 0; i < cb_arr.length; i++) {
cb_arr[i].checked = false
}
})
//反选
fan.addEventListener('click', function () {
let cb_arr = document.getElementsByName('hobby')
for (let i = 0; i < cb_arr.length; i++) {
cb_arr[i].checked = !cb_arr[i].checked
}
})
//用复选框控制全选/全不选
chk_box.addEventListener('click', function () {
if (this.checked) {
let cb_arr = document.getElementsByName('hobby')
for (let i = 0; i < cb_arr.length; i++) {
cb_arr[i].checked = true
}
} else {
let cb_arr = document.getElementsByName('hobby')
for (let i = 0; i < cb_arr.length; i++) {
cb_arr[i].checked = false
}
}
})
</script>
</body>七、window对象的其他函数
1. open函数：打开一个窗口
open(url，name，specs，replace)
url：统一资源定位符(网址)，格式：
协议：//主机名：端口号/文件路径
http：超文本传输控制协议，是一个无状态协议。直接运行在TCP协议之上
https：SSL，是安全的超文本传输控制协议。运行在SSL之上，SSL在TCP之上
name：窗口的名称
_blank:在新窗口中打开页面
_self:在当前窗口打开页面
_parent:表示在父框架中打开页面
spaces: 表示窗口特征（大小、是否状态栏、是否有工具栏）
replace: 默认值为true，表示是否替换默认条目
练习 打开窗口
需要注意在写宽度高度时不写px，属性设置不能有空格
var myWindow;
function openWin() {
myWindow = window.open('http://www.hao123.com', 'newWin', 'width=400,height=200,left=200');
myWindow.document.write('<p>窗口名称为：' + myWindow.name + '</p>');
myWindow.document.write('<p>当前窗口的父窗口地址：' + window.parent.location + '</p>');
}
// (1)open函数返回一个窗口对象。将该对象赋给变量myWindow
// (2)myWindow.name：打开的窗口的name属性 --- 'newWin'
// name属性：表示窗口对象的名称
// (3)window.parent.location：
// window：指的是新打开的窗口中的BOM的window对象
// parent：上面window对象的属性，代表的是外层的窗口
// location：代表的是外层窗口的浏览器地址栏练习 关闭窗口
function closeWin() {
myWindow.close();
}
function checkWin() {
if (myWindow) { //表示如果myWindow对象存在
var str = myWindow.closed ? '窗口已关闭！' : '窗口未关闭！';
} else {
var str = '窗口没有被打开!';
}
document.getElementById('msg').innerHTML = str;
}
(1)myWindow是新打开的窗口对象
(2)close()函数：用来关闭窗口对象
(3)myWindow.closed：closed是窗口对象的属性，若窗口对象关闭该属性值为true,否则为false2. moveTo(x,y)：将窗口移动到指定的位置
<body>
<button onclick="openWin()">打开窗口</button>
<button onclick="moveWin()">移动窗口</button>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
function openWin() {
myWindow = window.open('', '', 'width=200,height=100');
myWindow.document.write("<p>这是新建窗口</p>");
}
function moveWin() {
myWindow.moveTo(300, 300);
myWindow.focus();
}
</script>
</body> 3. resizeTo(width,height)：改变窗口的大小
<body>
<button onclick="openWin()">打开窗口</button>
<button onclick="resizeWin()">调整窗口</button>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
function openWin() {
myWindow = window.open('', '', 'width=200,height=100');
myWindow.document.write("<p>这是新建窗口</p>");
}
function resizeWin() {
myWindow.resizeTo(300, 300);
myWindow.focus();
}
</script>
</body>focus函数：获取焦点，不会被覆盖。
open函数里面写了网址时，调整大小和移动都不行，因为写了网址就不是我们的窗口。
八、window对象的属性
1. innerHeight / innerWidth：返回窗口的文档显示区的高度和宽度。
2. outerHeight / outerWidth：返回窗口外部的高度和宽度（包括工具条和滚动条）。
这两个属性可用用于确定浏览器窗口的尺寸，都以像素返回尺寸。
document.write('文档显示区的宽度'+window.innerWidth+'<br/>')
document.write('文档显示区的高度'+window.innerHeight+'<br/>')
document.write('窗口外部的宽度'+window.outerWidth+'<br/>')
document.write('窗口外部的高度'+window.outerHeight+'<br/>')九、location对象：是浏览器的地址栏
1. url：统一资源定位符
IP：网际协议。
IP地址：是计算机在互联网上的唯一标识
IP地址的编址方式：
IPV4：点分十进制（192.168.1.125用点分开的四个十进制数）
IPV6：冒号十六进制（00::A1::B6::CF）
2. location的方法：
（1）assign(url)：载入新的文档
（2）reload(true/false)：重新载入当前文档
（3）replace(url)：用新的文档替换当前文档
<body>
<button onclick="newPage()">载入新页面</button>
<button onclick="replacePage()">替换页面</button>
<button onclick="reloadPage()">重载页面</button>
<script>
// 载入新页面
function newPage() {
location.assign('https://www.bilibili.com')
}
// 替换页面
function replacePage() {
location.replace('http://www.hao123.com')
}
// 重载页面
function reloadPage() {
location.reload(true)
}
</script>
</body> 3. location的属性：
href：表示url地址
C/S结构：Client/Server —- 客户端/服务器结构
B/S结构：Browser/Server —- 浏览器/服务器结构
常用属性：
console.log(location); //输出location对象
console.log(location.href); //输出当前地址的全路径地址
console.log(location.origin); //输出当前地址的来源
console.log(location.protocol); //输出当前地址的协议
console.log(location.hostname); //输出当前地址的主机名
console.log(location.host); //输出当前地址的主机
console.log(location.port); //输出当前地址的端口号
console.log(location.pathname); //输出当前地址的路径部分
console.log(location.search); //输出当前地址的?后边的参数部分<body>
<div class="box">
<!--原始方式：超链接的href属性
<a href="https://www.bilibili.com">进入网站导航</a>
-->
<!-- 方式二：按钮 location对象的href属性 -->
<button onclick="jumpPage()">进入网站导航</button>
</div>
<script>
// 方式二：按钮 location对象的href属性
function jumpPage() {
location.href = 'https://www.bilibili.com'
}
</script>
</body><style>
a{
text-decoration: none;
color: black;
font-size: 30px;
}
span{
color: red;
font-size: 50px;
}
</style>
<body>
<a href="https://www.bilibili.com">
<span id="seconds">5</span> 秒钟后跳转，也可以单击跳转
</a>
<script>
function autoJump(sec,url) {
// 1.获取span：可以动态改变数字
let span = document.getElementById('seconds')
span.innerHTML = --sec
if (sec>0) {
// 转义\'\'，由于url中由//
setTimeout("autoJump("+sec+",\'"+url+"\')",1000)
}else{
location.href = url
}
}
autoJump(5,'https://www.bilibili.com')
</script>
</body>十、history对象：该对象可以对浏览器访问过的URL历史记录进行操作，可以用来操作浏览器向前或向后翻页
1. 出于安全方面的考虑，history对象不能直接获取用户浏览过的URL，但可以控制浏览器实现“后退”和“前进”的功能。
2. 属性：length —— 历史列表中的网址数
console.log(history); //输出history对象
console.log(history.length); //可以获取到当成访问的链接数量
3. 方法：
（1）go( 整数 )：加载历史列表中某个具体页面。正数表示前进，负数表示后退
（2）back()：表示后退，加载是历史列表中前一个网址
（3）forward()：表示前进，加载历史列表中下一个网址
<body>
<button onclick="newPage()">新网页</button>
<button onclick="jump()">前进</button>
<script>
function newPage() {
location.assign('008-newPage.html')
}
function jump() {
// history.forward()
history.go(1)
}
</script>
</body><body>
<button onclick="goBack()">后退</button>
<script>
function goBack() {
// history.go(-1)
history.back()
}
</script>
</body>十一、navigator对象：是浏览器的嗅探器，保存的是浏览器的详细信息
1. appCodeName 浏览器的内部名称
2. appName 浏览器的名称
3. appVersion 浏览器的版本
4. platform 浏览器的操作平台
5. userAgent 客户端发送给服务器的User-Agent值
console.log('浏览器的内部名称：',navigator.appCodeName)
console.log('浏览器的名称：',navigator.appName)
console.log('浏览器的版本：',navigator.appVersion)
console.log('浏览器的操作平台：',navigator.platform)
console.log('User-Agent：',navigator.userAgent)十二、screen对象：返回当前窗口与屏幕相关的信息
1. 属性：
（1）width/height：屏幕的宽度和高度
console.log('当前窗口屏幕宽度',screen.width)
console.log('当前窗口屏幕高度',screen.height)（2）availWidth/availHeight:浏览器在屏幕中水平/垂直空间
console.log('浏览器在屏幕中水平空间',screen.availWidth)
console.log('浏览器在屏幕中垂直空间',screen.availHeight)（3）colorDepth:屏幕颜色深度
console.log('屏幕颜色深度',screen.colorDepth)（4）pixelDepth：色彩深度
console.log('色彩深度',screen.pixelDepth)BOM总结
1. BOM：浏览器对象模型：Browser Object Model
2. 作用：提供了对浏览器进行操作的方法、各种的属性
3. 核心对象：window对象（学习BOM重点）
4. 其他对象：document、history、location、navigator、screen，这些对象既可以作为BOM的对象独立使用，也可以作为window对象的属性来使用。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79785.html
