JavaScript操作BOM

缺乏、安全感 2024-04-29 11:10 6阅读 0赞

## 学习目标： ##

`BOM对象的组成及子对象的使用 会使用getElementById( )方法访问DOM元素 会使用getElementsByName( )方法访问DOM元素 会使用getElementsByTagName( )方法访问DOM元素 会使用定时函数和Date对象制作时钟特效`

--------------------

## 学习内容： ##

## 1.BOM模型 ##

BOM：浏览器对象模型（Browser Object Model）

BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象

![5cb54e2527ec42ec8444b709f11c4f62.png][]

### BOM可实现功能   u弹出新的浏览器窗口   u移动、关闭浏览器窗口以及调整窗口的大小   u页面的前进、后退 ###

## 2.window对象的常用属性 ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>属性名称</td> 
   <td>说 &nbsp; &nbsp; &nbsp;明</td> 
  </tr> 
  <tr> 
   <td>history&nbsp;</td> 
   <td>有关客户访问过的URL的信息</td> 
  </tr> 
  <tr> 
   <td>location</td> 
   <td>有关当前 URL 的信息</td> 
  </tr> 
 </tbody> 
</table>

语法

window.属性名="属性值"

示例

window.location="http://www.bdqn.cn" ;

## 3.window对象的常用方法 ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>方法名称</td> 
   <td>说 &nbsp; &nbsp; &nbsp;明</td> 
  </tr> 
  <tr> 
   <td>prompt（）</td> 
   <td>显示可提示用户输入的对话框</td> 
  </tr> 
  <tr> 
   <td>alert（）</td> 
   <td>显示带有一个提示信息和一个确定按钮的警示框</td> 
  </tr> 
  <tr> 
   <td>confirm( )</td> 
   <td>显示一个带有提示信息、确定和取消按钮的对话框</td> 
  </tr> 
  <tr> 
   <td>close（）</td> 
   <td>关闭浏览器窗口</td> 
  </tr> 
  <tr> 
   <td>open( )</td> 
   <td>打开一个新的浏览器窗口，加载给定 URL 所指定的文档</td> 
  </tr> 
  <tr> 
   <td>setTimeout( )</td> 
   <td>在指定的毫秒数后调用函数或计算表达式</td> 
  </tr> 
  <tr> 
   <td>setInterval( )</td> 
   <td>按照指定的周期（以毫秒计）来调用函数或表达式</td> 
  </tr> 
 </tbody> 
</table>

## 4.confirm()方法 ##

confirm()：将弹出一个确认对话框

示例

## 5.open()方法 ##

语法

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

![2aa243fe92684fdda8fbe1b15139cde0.png][]

## 6.history对象 ##

常用方法

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>名称</td> 
   <td>说 &nbsp; &nbsp; &nbsp;明</td> 
  </tr> 
  <tr> 
   <td>back()</td> 
   <td>加载 history 对象列表中的前一个URL</td> 
  </tr> 
  <tr> 
   <td>forward()</td> 
   <td>加载 history 对象列表中的下一个URL</td> 
  </tr> 
  <tr> 
   <td>go()</td> 
   <td>加载 history 对象列表中的某个具体URL</td> 
  </tr> 
 </tbody> 
</table>

![4aa5c2199f634c1aa04578b12eefc86c.png][]

## 7.location对象   常用属性 ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>名称</td> 
   <td>说 &nbsp; &nbsp; &nbsp;明</td> 
  </tr> 
  <tr> 
   <td>host</td> 
   <td>设置或返回主机名和当前URL的端口号</td> 
  </tr> 
  <tr> 
   <td>hostname</td> 
   <td>设置或返回当前URL的主机名</td> 
  </tr> 
  <tr> 
   <td>href</td> 
   <td>设置或返回完整的URL</td> 
  </tr> 
 </tbody> 
</table>

常用方法

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>名称</td> 
   <td>说 &nbsp; &nbsp; &nbsp;明</td> 
  </tr> 
  <tr> 
   <td>reload()</td> 
   <td>重新加载当前文档</td> 
  </tr> 
  <tr> 
   <td>replace()</td> 
   <td>用新的文档替换当前文档</td> 
  </tr> 
 </tbody> 
</table>

### location和history对象的应用 ###

<a href="javascript:location.href='flower.html'">查看鲜花详情</a>  
    <a href="javascript:location.reload()">刷新本页</a>
    <a href="javascript:history.back()">返回主页面</a>

## 8.document对象 ##

常用属性

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>属性名称</td> 
   <td>说 &nbsp; &nbsp; &nbsp;明</td> 
  </tr> 
  <tr> 
   <td>referrer</td> 
   <td>返回载入当前文档的URL</td> 
  </tr> 
  <tr> 
   <td>URL</td> 
   <td>返回当前文档的URL</td> 
  </tr> 
 </tbody> 
</table>

语法

document.referrer
    document.URL

## 9.document对象应用 ##

判断页面是否是链接进入

自动跳转到登录页面

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

## 10.document对象的常用方法 ##

![0527d1be7ba84cc9b23c47c1b0d22235.png][]

## 11.JavaScript内置对象 ##

Array：用于在单独的变量名中存储一系列的值  
String：用于支持对字符串的处理  
Math：用于执行常用的数学任务，它包含了若干个数字  
常量和函数  
Date：用于操作日期和时间

## 12.Date对象 ##

语法

var 日期对象 = new Date(参数)
    参数格式：MM  DD,YYYY,hh:mm:ss

示例

var  today=new Date();   //返回当前日期和时间
    var tdate=new Date("september 1,2013,14:58:12");

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

## 13.制作时钟特效 ##

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

function disptime(){
        var today = new Date();
        var hh = today.getHours();
        var mm = today.getMinutes();
        var ss = today.getSeconds();
        document.getElementById("myclock").innerHTML="现在是："+hh+
            ":"+mm+": "+ss;
    }
    disptime();

## 14.定时函数 ##

语法

setTimeout("调用的函数"，等待的毫秒数)

示例

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

<input name="s" type="button" value="显示提示消息" onclick="timer()" />
    function timer(){
            var t=setTimeout("alert('3 seconds')",3000);
    }

## 15.定时函数2 ##

语法

setInterval("调用的函数",间隔的毫秒数)

示例

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

如果要多次调用，使用setInterval()或者让disptime()自  
身再次调用setTimeout()

## 16.清除定时函数 ##

语法

clearTimeout(setTimeOut()返回的ID值)

示例：

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

语法

clearInterval(setInterval()返回的ID值)

示例

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

[5cb54e2527ec42ec8444b709f11c4f62.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/8f35fa22821d49d68fb64f9c9464536b.png
[2aa243fe92684fdda8fbe1b15139cde0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/eed026b832a14371bff01155a3869e28.png
[4aa5c2199f634c1aa04578b12eefc86c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/a644240ae7fb47959d78b17392a09e32.png
[0527d1be7ba84cc9b23c47c1b0d22235.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/32027870587140f0aa8584030813623a.png