JavaScript操作BOM对象

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()	按照指定的周期（以毫秒计）来调用函数或表达式

1. confirm()与alert ()、 prompt()区别：

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

2. open()方法

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

   2. 属性名称	说明
      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对象

1. location对象的常用属性

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

2. location对象的常用方法

   名称	说明
   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(参数);

1. 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日）以来的毫秒数

2. 使用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>

3. 定时函数：

   1. setTimeout():

      setTimeout(“调用的函数”,等待的毫秒数)

      var myTime＝setTimeout("disptime() ", 1000 );

      //1秒(1000毫秒)之后执行函数disptime()一次

   2. setInterval()
      setInterval(“调用的函数”,间隔的毫秒数)

      var myTime＝setInterval("disptime() ", 1000 );

      //每隔1秒(1000毫秒)执行函数disptime()一次

4. 清除函数

   1. clearTimeout()

      clearTimeout(setTimeOut()返回的ID值)

   2. clearInterval()

      var myTime＝setInterval("disptime() ", 1000 );
      clearInterval(myTime)；

math对象

1. Math对象常用方法

   方法	说明
   ceil()	对数进行上舍入
   floor()	对数进行下舍入
   round()	把数四舍五入为最接近的数
   random()	返回0~1之间的随机数

2. 实现返回的整数范围为2~99

   var iNum=Math.floor(Math.random()*98+2);