JavaScript操作BOM对象

BOM模型

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

Window就是整个BOM的核心，window又分为history、document和location。

window对象

1. window对象的常用属性

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

语法：window.属性名称=“属性值”;如：window.location=“https://www.souhu.com” ;

2. window对象的常用方法

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

confirm()与alert ()、 prompt()区别：
1. alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变；
2. uprompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息；
3. uconfirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用。

open()方法

window.open(“弹出窗口的url”,“窗口名称”,“窗口特征”);

属性名称	说明
height、width	窗口文档显示区的高度、宽度。以像素计窗口文档显示区的高度、宽度。以像素计
left、top	窗口的x坐标、y坐标。以像素计
toolbar=yes\|no	是否显示浏览器的工具栏。黙认是yes
scrollbars=yes\|no	是否显示滚动条。黙认是yes
location=yes\|no	是否显示地址地段。黙认是yes
status=yes\|no	是否添加状态栏。黙认是yes
menubar=yes\|no	是否显示菜单栏。黙认是yes
resizable=yes\|no	窗口是否可调节尺寸。黙认是yes
titlebar=yes\|no	是否显示标题栏。黙认是yes
fullscreen=yes\|no	是否使用全屏模式显示浏览器。黙认是no。处于全屏模式的窗口必须同时处于剧院模式

history对象

1. history对象的常用方法

名称	说明
back()	加载 history 对象列表中的前一个URL
forward()	加载 history 对象列表中的下一个URL
go()	加载 history 对象列表中的某个具体URL

history.back()等价于history().go(-1);history.forward()等价于history.go(1)。

location对象

location对象的常用属性

名称说明
host 设置或返回主机名和当前URL的端口号
hostname 设置或返回当前URL的主机名
href 设置或返回完整的URL
location对象的常用方法

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

名称	说明
host	设置或返回主机名和当前URL的端口号
hostname	设置或返回当前URL的主机名
href	设置或返回完整的URL

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

Document对象

1. document对象常用属性

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

2. 判断页面是否连接进入，自动跳转登陆页面

<script>
    var preUrl=document.referrer; //载入本页面文档的地址
    if(preUrl==""){
        document.write("<h2>您不是从领奖页面进入，5秒后将自动 跳转到登录页面</h2>");
        setTimeout("javascript:location.href='login.html'",5000);
    }
</script>

3. document常用方法

名称	说明
getElementById()	返回对拥有指定id的第一个对象的引用
getElementsByName()	返回带有指定名称的对象的集合
getElementsByTagName()	返回带有指定标签名的对象的集合
write()	向文档写文本、HTML表达式或JavaScript代码

date对象

var 日期对象=new Date(参数);

date对象常用方法

方法	说明
getDate()	返回 Date 对象的一个月中的每一天，其值介于1～31之间
getDay()	返回 Date 对象的星期中的每一天，其值介于0～6之间
getHours()	返回 Date 对象的小时数，其值介于0～23之间
getMinutes()	返回 Date 对象的分钟数，其值介于0～59之间
getSeconds()	返回 Date对象的秒数，其值介于0～59之间
getMonth()	返回 Date 对象的月份，其值介于0～11之间
getFullYear()	返回 Date对象的年份，其值为4位数
getTime()	返回自某一时刻（1970年1月1日）以来的毫秒数

使用Date对象的方法显示当前时间的小时、分钟和秒

<div id="myclock"></div>
<script>
    function disptime(){//建立无参函数var today = new Date();//new一个date对象
        var hh = today.getHours();//获得小时
        var mm = today.getMinutes();//获得分钟
        var ss = today.getSeconds();//获得秒数
        document.getElementById("myclock").innerHTML="现在是:"+hh +":"+mm+": "+ss;
    }
    disptime();//调用函数
</script>

定时函数：
1. setTimeout():
  
  setTimeout(“调用的函数”,等待的毫秒数)
  
  var myTime＝setTimeout("disptime() ", 1000 );
  
  //1秒(1000毫秒)之后执行函数disptime()一次
2. setInterval()
  setInterval(“调用的函数”,间隔的毫秒数)
  
  var myTime＝setInterval("disptime() ", 1000 );
  
  //每隔1秒(1000毫秒)执行函数disptime()一次
清除函数
1. clearTimeout()
  
  clearTimeout(setTimeOut()返回的ID值)
2. clearInterval()
  
  var myTime＝setInterval("disptime() ", 1000 );
  clearInterval(myTime)；