【第二章：JavaScript操作BOM对象】

BOM模型

BOM：浏览器对象模型（Browser Object Model）
BOM提供了独立于页面内容的、与浏览器窗口进行互动的对象结构 ​ BOM可实现的功能有：
弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口的大小
页面的前进、后退

！window对象的常用属性

属性名称	说明
history	有关客户访问过的URL的信息
location	有关当前URL的信息

语法：
window.属性名= “属性值”

示例：
window.location=“http://www.biadu.com” ; ！！window对象的常用方法

方法名称	说明
prompt()	显示可提示用户输入的对话框
alert( )	显示带有一个提示信息和一个确定按钮的警示框
confirm()	显示一个带有提示信息、确定和取消按钮的对话框
close( )	关闭浏览器窗口
open( )	打开一个新的浏览器窗口,加载给定URL所指定的文档
setTimeout()	在指定的毫秒数后调用函数或计算表达式
setlnterval( )	按照指定的周期（以毫秒计）来调用函数或表达式

confirm()方法

<script type="text/javascript">
    var flag=confirm("确认要删除此条信息吗?");
    if(flag==true){
        alert("删除成功!");
    }else{
        alert("你取消了删除");
    }
</script>

open()方法

简单使用：
window.open(“adv.html”,"_blank",“height=20,width=1,top=100”);
history对象常用方法

location对象常用属性

location对象常用方法

名称	说明
reload()	重新加载当前文档
replace()	用新的文档替换当前文档

<a href="javascript:location.href='flower.html'">跳转到指定页面</a>  
<a href="javascript:location.reload()">刷新</a>
<a href="javascript:history.back()">返回上一个页面</a>

Document对象常用属性

名称	说明
referrer	返回载入当前文档的URL
URL	返回当前文档的URL

语法：
//获取载入本页面文档的地址
document.referrer
document.URL
Document对象的常用方法

名称	说明
getElementByld()	返回对拥有指定id的第一个对象的引用
getElementByld()	返回对拥有指定id的第一个对象的引用
getElementsByName()	返回带有指定名称的对象
getElementsByTagName()	返回带有指定标签名的对象的集合

write() 向文档写文本、HTML表达式或JavaScript代码
示例：
动态改变层、标签中的内容
document.getElementById(“ABC”).innerHTML=“ABC”;
​
获取具有相同name属性的元素
var aInput=document.getElementsByName(“season”);
​
获取具有相同标签的元素
var aInput=document.getElementsByTagName(“input”);
var sStr="";
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+"  ";
}
document.getElementById(“replace”).innerHTML=sStr;
JavaScript内置对象
Array：
用于在单独的变量名中存储一系列的值
String：
用于支持对字符串的处理
Math：
用于执行常用的数学问题，包含了若干个数字常量和函数
Date：
用于操作日期和时间
Date对象
语法：
var 日期对象=new Date()
参数格式：MM DD,YYYY,hh:mm:ss
示例：
var today=new Date(); //返回当前日期和时间
var tdate=new Date(“september 1,2019,14:58:12”);
Date对象的常用方法

Math对象常用方法

定时函数setTimeout()
语法：
setTimeout(“调用的函数”,等待的毫秒数)
示例：
1秒(1000毫秒)之后执行函数disptime()一次
var myTime＝setTimeout("disptime() ", 1000) );
​

function timer(){
setTimeout(“alert(‘3秒’)”,3000);
}
定时函数setInterval()
语法：
setInterval(“调用的函数”,间隔的毫秒数)
​
示例：
每隔1秒(1000毫秒)执行函数disptime()一次
var myTime＝setInterval("disptime() ", 1000 );
定时函数两者的区别；
1、setTimeout()在等待指定时间后执行函数，且只执行一次；
2、setInterval()是每指导间也不是时间后执行一次函数，循环执行，所以时钟例子使用setInterval();
清除函数clearTimeout()
语法：
clearTimeout(setTimeOut()返回的ID值)
示例：
var myTime＝setTimeout("disptime() ", 1000 );
clearTimeout(myTime)；
​
语法：
clearInterval(setInterval()返回的ID值)
示例：
var myTime＝setInterval("disptime() ", 1000 );
clearInterval(myTime)；
清除函数两者之间的区别；
1、clearTimeout()清除由setTimeout()设置的定时；
2、clearInterval()清除由setInterval()设置的定时；
时钟特效

<div id="myclock"></div>
<input type="button" onclick="javaScript:clearInterval(myTime)" value="停止">
<script type="text/javascript">
    function disptime(){
        var today = new Date();     //获得当前时间
        var hh = today.getHours();  //获得小时、分钟、秒
        var mm = today.getMinutes();//获得分钟
        var ss = today.getSeconds();//获得秒
        /*设置div的内容为当前时间*/
        document.getElementById("myclock").innerHTML="现在是:"+hh +":"+mm+": "+ss;
    }
    /*使用setInterval()每间隔指定毫秒后调用disptime()*/
   var myTime = setInterval("disptime()",1000);
</script>

JavaScript操作BOM对象总结
window对象：
alert( )、confirm( )、close( )、open( )、
setTimeout( )、setInterval( )
​
history对象与location对象：
back( )、forward( )、go( )、
reload( )、replace( )
​
document对象：
getElementById( )、getElementsByName( )、getElementsByTagName( )
​
JavaScript内置对象：
Date对象：时钟特效、
Math对象