本文详细介绍了JavaScript中浏览器对象模型(BOM)的概念及其核心组成部分，如window对象的属性与方法，history与location对象的使用，以及各类事件处理，如定时器、页面导航控制等。
1.BOM的概述
browser object modal :浏览器对象模型。
浏览器对象：window对象。
window对象是JavaScript层级中的顶层对象
window对象代表一个浏览器窗口或一个框架
Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。
window的子对象有Navigator对象（判断当前浏览器是什么浏览器）、Screen对象（通过显示屏幕能拿到屏幕的分辨率）、
History对象、Location对象、Document对象。
2. window的属性
innerheight: 返回文本显示区的高度
innerwidth: 返回文本显示区的宽度 IE不支持
通用写法：document.body.clientWidth （省略了window对象）
document.body.clientHeight （IE字体默认高度是19）
outerheight:包括了工具栏、菜单栏的高度
outerwidth:包括滚动条的宽度
self :等同于window对象
status:状态栏
parent：是打开窗口的父窗口对象（代表的是拿到父窗口window对象）
opener：是打开窗口的父窗口对象。
2种情况下使用opener:（必须要求两个窗口有父子关系）
1.使用winodw.open()方法打开的页面
2.超链（里面的target属性要设置成_blank）
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>页面之间的数据传递</title> </head> <script type="text/javascript"> <!-- function fun(){ window.open("sub.html"); } //--> </script> <body> <input type="text" name="" id="txt"> <input type="button" value="跳转到子窗口页面" onclick="fun()"> <a href="sub.html" target="_blank">跳转到子窗口页面</a> </body> </html>
<meta name="Keywords" content=""> <meta name="Description" content=""> <title>子窗口</title> </head> <script type="text/javascript"> <!-- //子窗口文本框中的值传递给父窗口文本框中 function fun(){ //1、拿到子窗口文本框对象中的值 var v=document.getElementById("txt").value; //2、拿到父窗口的window对象 var f=window.opener; //3、拿到父窗口中的文本框对象 var txt=f.document.getElementById("txt"); //4、将内容赋值给父窗口中的文本框对象的value属性 txt.value=v; } //--> </script> <body> <input type="text" name="" id="txt"> <input type="button" value="子窗口文本框中的值传递到父窗口文本框中" onclick="fun()"> </body> </html>
2种情况下使用parent:
1.iframe 内嵌框架
2.frame 框架
frames[]:拿到子窗口对象。 数组类型，代表子窗口的window对象的集合,可以通过frames[索引]拿到子窗口的window对象。
示例：父子窗口相互传参.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>window对象的parent属性</title> </head> <script type="text/javascript"> <!-- function fun(){ //1.拿到文本框中填写的数据 var v = document.getElementById("txt").value ; //2.拿到子窗口对象 var w = window.frames[0]; //3.拿到子窗口中的文本框对象 var txt = w.document.getElementById("txt") ; //4.将内容赋值给父窗口中的文本框对象的value属性 txt.value = v ; } //--> </script> <body> 姓名：<input type="text" name="" id = "txt"><input type="button" value="传递数据到子窗口中" onclick="fun()"> <iframe src = "sub1.html"></iframe> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <script type="text/javascript"> <!-- function fun(){ //1.拿到文本框中填写的数据 var v = document.getElementById("txt").value ; //2.拿到父窗口对象 var w = window.parent; //3.拿到父窗口中的文本框对象 var txt = w.document.getElementById("txt") ; //4.将内容赋值给父窗口中的文本框对象的value属性 txt.value = v ; } //--> </script> <body> <input type="text" name="" id = "txt"><input type="button" value="传递数据到父窗口中" onclick="fun()"> </body> </html>
方法：
open()方法，是打开一个新的浏览器窗口（页面）或查找一个已命名的窗口.
语法：
window.open(URL,name,features,replace)
URL:打开的页面
name：打开的页面的名字
features：窗口特征
对话框：
1)消息框 alert() ;
2)确认框 confirm() ; 返回Boolean类型的值
3)输入框 prompt() ; (了解)返回输入的字符串，一个参数，就是输入值。两个参数，第二个参数是默认值。
定时器：
setTimeout ,setInterval
定时器： 1.setTimeout() :隔一段时间调用某个函数，（只会调用1次）返回的是一个计时器对象，自动销毁
clearTimeout():销毁setTimeout()产生的计时器对象
2.setInterval() ：每隔一段时间调用某个函数（多次调用）返回的是一个计时器对象，直到你销毁，不会自动销毁
clearInterval():销毁setInterval()产生的计时器对象
close()方法：关闭浏览器窗口
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>window对象的计时器</title> </head> <script type="text/javascript"> <!-- /* window对象的计时器：1.setTimeout(): 隔一段时间调用某个函数(只调用一次),返回的是一个计时器(理解成一个手表) clearTimeout() ：销毁由setTimeout()产生的计时器 2.setInterval(): 每隔一段时间调用某个函数(多次调用) clearInterval(): 销毁由setInterval()产生的计时器 */ var t ; var t1 ; function fun(){ //拿到p标签的主体内容 var p= document.getElementById("p") ; var v = p.innerHTML ; //将主体内类转换为number,转换后赋值回去 p.innerHTML = v*1-1 ; t = setTimeout("fun()",1000) ; } function fun1(){ //拿到p标签的主体内容 var p= document.getElementById("p") ; var v = p.innerHTML ; //将主体内类转换为number,转换后赋值回去 p.innerHTML = v*1-1 ; } function fun2(){ clearTimeout(t) ; } t1 = setInterval("fun1()",1000); function fun3(){ clearInterval(t1) ; } function fun4(){ t1 = setInterval("fun1()",1000); } //--> </script> <body> <p id = "p">10</p><br> <input type="button" value="演示setTimeout方法" onclick="fun()"> <input type="button" value="演示clearTimeout方法" onclick="fun2()"> <input type="button" value="演示setInterval方法" onclick="fun4()"> <input type="button" value="演示clearInterval方法" onclick="fun3()"> </body> </html>
3. history对象（存储访问过的页面，并按顺序排列好）
a. forward()前进一个页面
b. back() 后退一个页面
c. go(n) 直接去哪个页面，正数是前进，负数是后退.
4. location对象。
1.href 属性： 是指要连接到其他的URL
写法一、window.location.href='demo_window对象的close方法.html' ；
写法二、window.location='demo_window对象的close方法.html' ；
2.reload方法: 刷新，重新加载本页面。
写法： window.location.reload() ；
5.常用事件
*鼠标移动事件
onmousemove(event) : 鼠标移动事件 event是事件对象。名字固定。 （鼠标移动时会产生一个事件event对象）
获取横竖坐标是通过event对象的clientX、clientY属性。event在这里代表鼠标的事件，鼠标的属性可以通过它拿到。
onmouseover : 鼠标悬停事件，鼠标移动到某个空间发生的事件
onmouseout : 鼠标移出事件 当鼠标从控件上移开的时候
* 鼠标点击事件
onclick : 当鼠标单击某个控件时发生
示例： 当单击按钮时，在<p>中显示字符串 "冠希哥来了" 参见(demo03_鼠标单击事件.html)
* 加载与卸载事件
onload ,onunload
加载事件(onload) : 在整个页面的元素加载完毕之后发生
卸载事件(onunload) : 是在页面关闭时发生
注意： onload和onunload事件必须写在body或者图片标签里面
示例参见（demo04_加载卸载事件.html）
* 聚焦与离焦事件
onfocus, onblur
聚焦事件：是在控件获得焦点的时候发生
离焦事件：是在控件失去焦点的时候发生
示例： 文本框获得焦点的时候改变样式，失去焦点时变回原样(参见demo05_聚焦离焦事件.html)
* 键盘事件
onkeypress,onkeyup,onkeydown
onkeypress: 按下键盘按键并松开 onkeypress="fun(this,event)"通过event获取与事件相关的信息
onkeydown : 按下按键发生
onkeyup: 松开按键
示例参见（demo06_键盘事件.html`）
* 提交与重置事件
onsubmit,onreset
提交事件： 是在点击提交按钮后发生。(必须写在form表单中，表单中的数据提交给另一个页面)
重置事件： 是在点重置交按钮后发生。
示例： 提交表单中的数据(检查):如果是陈冠希：通过，否则不能提交数据（参见demo07_提交重置事件.html）
* 选择与改变事件
onselect:
onselect: 只能用于输入框. 当选择输入框中的文本时发生
onchange:
onchange: 用于select（下拉框）和文本框.
对于下拉框是在选项发生变化的时候发生
对于文本框是在文本框的内容发生变化并且失去焦点时发生
示例： 当选择文本框的内容时，弹出文本框的内容
下拉框的selectedIndex属性：代表选中某项的索引
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>图片轮流滚动</title> </head> <script type="text/javascript"> <!-- /*var n=0; function init(){ n++; if(n==7) n=1; //得到图片对象 var img=document.getElementById("img"); //改变图片 img.src="images/ba"+n+".jpg"; //每个一秒变换一次 setTimeout("init()",1000); }*/ var arr=["images/ba1.jpg","images/ba2.jpg","images/ba3.jpg","images/ba4.jpg","images/ba5.jpg","images/ba6.jpg"]; var n=0; function init(){ n++; if(n==arr.length) n=0; var img=document.getElementById("img"); img.src=arr[n]; setTimeout("init()",1000); } alert(arr.length); //--> </script> <body onload="init()"> <center> <img src="images/ba1.jpg" width="100px" height="300px" id="img"> </center> </body> </html>
JavaScript调用CSS代码的两种方式：
1、用style对象 eg:p.style.color="red"; 带“-”的属性去掉“-”首字母大写
2、用className属性（当CSS为类选择器时）， p.className="one";
JavaScript调用HTML代码：
1、拿到html标签对象。
2、标签对象.innerHTML="<img src='1.jpg' width='200' height='200'>";
删除属性或事件：
空间对象.removeAttribute("要删除的属性或事件");
扫一扫
1077
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
