前言
本文将会总结JavaScript中重要的知识点-----BOM模型（浏览器对象模型）。它的作用是将相关的元素组织包装起来，提供给程序设计人员使用，从而减轻开发人员的工作量，提高设计Web页面的效率。实现功能：1.弹出新的浏览器，2.移动，关闭浏览器窗口以及调整窗口的大小，3.页面的前进，后退
提示：以下是本篇文章正文内容，下面案例可供参考
一、BOM模型对象–Window对象
1.window对象属性：
Window对象的
常用属性：
history(历史):有关客户访问过的URL的信息
location(当前):有关当前URL的信息
parent:返回父窗口
frames:返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架。
opener: 返回对创建此窗口的引用
注意：opener和parent都可以给子窗口传递参数。
不同点：
opener用于超链接，而且打开的这个超链接必须要有父子关系，若不是通过超链接打开，向父窗口传参数时，将会传不过去。
parent用于iframe框架
代码如下：（对于parent属性和frames属性的应用【父子窗口传参】,opener属性）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
//父窗口
<script>
function fun(){
//1. 获取文本框的内容
var v = document.getElementById("name").value ;
//2. 获取子窗口的window对象
var w = window.frames[0]; //这里的window和self代表的意义相同，所以这里也可以写成self.frames[0]
//3. 获取父窗口中文本框对象
var input = w.document.getElementById("name") ;
//4.设置文本框的内容
input.value = v ;
}
</script>
<body>
<input id = "name" ><button onclick="fun()">传递参数到iframe中</button><br>
<iframe src = "b.html" width = 300 height = 400 ></iframe> <!-- 在此页面上再显示一个b.html的窗口 -->
<!-- <a href = "b.html" target="_blank">b.html</a> --> 此语句是opener属性的应用
</body>
</html>
<script>
//子窗口（通过iframe框架引入，显示在父窗口上）
function fun(){
//1. 获取文本框的内容
var v = document.getElementById("name").value ;
//2. 获取父窗口的window对象
var w = window.parent ;
//var w = window.opener; //opener属性用此语句
// console.log(w)
//3. 获取父窗口中文本框对象
var input = w.document.getElementById("name") ;
//4.设置文本框的内容
input.value = v ;
}
</script>
<body>
<input id = "name"><button onclick = "fun()">传递数据到父窗口中</button>
</body>
status属性：设置窗口状态栏的文本。
defaultstatus属性：设置或返回窗口状态栏中的默认文本
这两个属性在IE,火狐,chrome,和Safari默认配置是不能正常工作，要允许脚本来改变状态栏文本。
2.window对象方法：
1.内容：
| 方法 | 描述 |
|---|---|
| alert() | 消息框，只有一个确定按钮 |
| confirm() | 确认框，有两个按钮，一个确定，一个取消，返回值是boolean |
| prompt() | 输入框， 弹出来的输入文本框 |
| open(URL,name,specs,replace) | 打开一个新的浏览器窗口 ,可以设置此窗口的长宽等一些属性 |
| moveTo() | 把窗口的左上角移动到一个指定的坐标 |
| resizeBy() | 按照指定的像素调整窗口的大小 |
| resizeTo() | 把窗口的大小调整到指定的宽度和高度 |
| setTimeout() | 在指定的毫秒数后调用函数或者计算表达式 |
| setInterval() | 在指定的周期（以毫秒计）后调用函数或者计算表达式 |
| getComputedStyle() | 获取指定元素的 CSS 样式 |
alert() 消息框，只有一个确定按钮
//window对象的方法，属性，可以省略window对象,用着两种方法都可以。
window.alert("我是一个弹出消息框") ;
//alert("你好") ;
confirm()： 确认框，有两个按钮，一个确定，一个取消，返回值是boolean
//如果点确定，将会返回true；点取消，将会返回false
let f = confirm('确定要删除吗？');
alert(f);
prompt() ：输入框， 弹出来的输入文本框
//如果有数值，此数值就是默认的账号
//let value = propt("请输入你的账号：",12345678)
let value = prompt("请输入你的账号：")
alert(value);
getComputedStyle() : 获取指定元素的 CSS 样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
p{
background-color: darkgreen;
font-size: 30px;
}
</style>
</head>
<script>
function fun(){
var p = document.getElementById("p") ;
//console.log(p.style.backgroundColor) //获取不到此属性
//获取到的是样式表的对象
let style = self.getComputedStyle(p) ;
//获取样式表对象其中的一个属性的值
console.log(style.getPropertyValue("font-size"))
}
</script>
<body>
<p id= "p">how are you?</p>
<button onclick="fun()">getComputedStyle方法</button>
</body>
</html>
1.
setTimeout: 我们在理解的时候可以把setTimeout理解为一块表，当调用此方法时，js引擎就产生了一块表，
开始计算，等指定的时间一到，js引擎会自动调用此方法指定的函数，同时此表自动销毁。
有两个参数，第一个参数是要调用的函数，第二个参数是时间，单位是毫秒。
clearTimeout : 销毁
2.setInterval: 同样是一块表，不同的是此表不会自动销毁，必须我们手动销毁。
clearInterval : 销毁
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
//setTimeout定时器
let t ;
function fun(){
//1.获取p标签对象
let p = document.getElementById('p') ;
//2.获取p标签的主体文本
let txt = p.innerHTML ;
//3.改变文本
txt = txt * 1 - 1 ;
//4. 将改变后的文本设置为p标签的主体文本
document.getElementById('p') .innerHTML = txt ;
//5. 每隔1秒调用1次
//t = setTimeout("fun()",2000) ;
}
function fun1(){
clearTimeout(t) ;
}
//setInterval定时器
function func(){
//1.获取p标签对象
let p = document.getElementById('p') ;
//2.获取p标签的主体文本
let txt = p.innerHTML ;
//3.改变文本
txt = txt * 1 - 1 ;
//4. 将改变后的文本设置为p标签的主体文本
document.getElementById('p') .innerHTML = txt ;
}
function fun2(){
t = setInterval("func()",1000) ;
}
function fun3(){
clearInterval(t)
}
</script>
<body>
<p id= "p">30</p>
<button onclick="fun()">开始计时</button>
<button onclick="fun1()">停止计时</button>
<button onclick="fun2()">开始(setInterval)计时</button>
<button onclick="fun3()">停止(setInterval)计时</button>
</body>
</html>
2.对定时器的简单应用（setTimeout()）:
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
//这是对于图片样式的设置：背景色，宽高等
#d{
width:300px;
height: 300px;
background-color: greenyellow;
margin:50px auto ;
padding:10px 10px ;
}
img{
width:297px;
height: 297px;
}
</style>
</head>
<script type="text/javascript">
let n = 0 ;
function fun(){
n++ ; //n代表的是照片
if(n ==5)
n =1 ;
//1.获取图片标签对象
let img = document.getElementById("img") ;
//2.指定图片标签的src属性
img.src = `img/${n}.jpg`
//3.每隔2秒调用一次此函数
setTimeout("fun()",2000)
}
</script>
<body>
<div id = "d"><img src = "img/1.jpg" id = "img"></div>
<button onclick="fun()">开始</button>
</body>
</html>
二. 总结
本篇主要是对BOM模型中的window对象（属性，方法）进行了一些总结。下篇将会进行其他对象的总结。
228
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
