HTML-JavaScript操作BOM对象

我不是女神ヾ 2022-05-12 07:42 233阅读 0赞

**BOM****模型**

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

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

![70][]

**BOM****可实现功能**

**             1.****弹出新的浏览器窗口**

**             2.****移动、关闭浏览器窗口以及调整窗口的大小**

**             3.****页面的前进、后退**

**window****对象**

**1.****常用的属性**

![70 1][]

**语法：****window.****属性名****=** **"****属性值****"**

**示例：window.location=****"****http****://www.bdqn.cn****"** **;**      【表示跳转到百度首页】

2.**常用的方法**

![70 2][]

**1.confirm()****方法**

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

confirm("对话框中显示的纯文本")

### **confirm( )与alert ( )、 prompt( )区别：** ###

**alert( )：**一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变

**prompt( )：**两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息

**confirm( )：**一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用

**2.open( )：打开弹出网页**

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

窗口特征：

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:top;width:193px;"> 属性名称 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:top;width:557px;"> 说&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 明 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:193px;"> height、width </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:557px;"> 窗口文档显示区的高度、宽度。以像素计 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:193px;"> left、top </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:557px;"> 窗口的x坐标、y坐标。以像素计 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:193px;"> toolbar=yes | no&nbsp; |1 | 0 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:557px;"> 是否显示浏览器的工具栏。黙认是yes </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:193px;"> scrollbars=yes | no&nbsp; |1 | 0 </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:557px;"> 是否显示滚动条。黙认是yes </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:193px;"> location=yes | no&nbsp; |1 | 0 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:557px;"> 是否显示地址地段。黙认是yes </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:193px;"> status=yes | no&nbsp; |1 | 0 </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:557px;"> 是否添加状态栏。黙认是yes </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:193px;"> menubar=yes | no&nbsp; |1 | 0 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:557px;"> 是否显示菜单栏。黙认是yes </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:193px;"> resizable=yes | no&nbsp; |1 | 0 </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:557px;"> 窗口是否可调节尺寸。黙认是yes </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:193px;"> titlebar=yes | no&nbsp; |1 | 0 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:557px;"> 是否显示标题栏。黙认是yes </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:193px;"> fullscreen=yes | no&nbsp; |1 | 0 </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:557px;"> 是否使用全屏模式显示浏览器。黙认是no。处于全屏模式的窗口必须同时处于剧院模式 </td> 
 </tr> 
 </tbody> 
</table>

**3.close( )：网页的关闭**

window. close( );

## **history对象：** ##

### 常用方法： ###

![70 3][]

方法中的等价关系：

![70 4][]

## **location****对象** ##

### **常用属性**： ###

![70 5][]

**常用方法：**

![70 6][]

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

主页面使用href实现跳转和刷新本页

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

![70 7][]

**Document****对象**

**常用属性**

![70 8][]

**语法：**

**document.referrer**

**document.URL**

**Document****对象应用**

![70 9][]![70 10][]

**判断页面是否是链接进入**

**自动跳转到登录页面**

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

**Document****对象的常用方法**

![70 11][]

### **Document对象访问页面元素：** ###

**动态改变层、标签中的内容：**

document.getElementById("book").innerHTML="现象级全球畅销书";

![70 12][]

**访问相同name的元素：**

var aInput=document.getElementsByName("season");
 
 var sStr="";
 
 for(var i=0;i<aInput.length;i++){
 
    sStr+=aInput[i].value+"  ";  }
 
 document.getElementById("replace").innerHTML=sStr;

![70 13][]

**访问相同标签的元素：**

var aInput=document.getElementsByTagName("input");
 
 var sStr="";
 
 for(var i=0;i<aInput.length;i++){
 
    sStr+=aInput[i].value+"  ";  }
 
 document.getElementById("replace").innerHTML=sStr;

![70 14][]

**JavaScript****内置对象**

**         1.****Array****：用于在单独的变量名中存储一系列的值**

**         2.****String****：用于支持对字符串的处理**

**         3.****Math****：用于执行常用的数学任务，它包含了若干个数字常量和函数**

**         4.****Date****：用于操作日期和时间**

**Date****对象**

**语法：**

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

**参数****格式：****MM**  **DD,YYYY,hh:mm:ss**

**示例：**

**var****  today=new Date();   //****返回当前日期和时间**

**var** **tdate****=new Date("****september** **1,2013,14:58:12");**

**常用方法**

![70 15][]

**制作时钟特效**

**使用****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();
 
 <div id="myclock"></div>

**Math对象-****常用方法**

<table style="width:588px;"> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:top;width:90px;"> 方法 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:top;width:189px;"> 说 明 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:top;width:306px;"> 示例 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:top;width:90px;"> ceil() </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:top;width:189px;"> 对数进行上舍入 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:top;width:306px;"> Math.ceil(25.5);返回26 Math.ceil(-25.5);返回-25 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:top;width:90px;"> floor() </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:top;width:189px;"> 对数进行下舍入 </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:top;width:306px;"> Math.floor(25.5);返回25 Math.floor(-25.5);返回-26 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:top;width:90px;"> round() </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:top;width:189px;"> 把数四舍五入为最接近的数 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:top;width:306px;"> Math.round(25.5);返回26 Math.round(-25.5);返回-26 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:top;width:90px;"> random() </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:top;width:189px;"> 返回0~1之间的随机数 </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:top;width:306px;"> Math.random();例如：0.6273608814137365 </td> 
 </tr> 
 </tbody> 
</table>

**如何实现返回的整数范围为****2~99****？**

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

**随机选择****颜色**

function selColor(){
            var color=Array("红色","黄色","蓝色","绿色","橙色","青色","紫色");
            var num=Math.ceil(Math.random()*7)-1;
            document.getElementById("color").innerHTML=color[num];
    }

![70 16][]

**定时函数**

**1.****setTimeout****()**

**语法：setTimeout****("****调用的函数****",****等待的毫秒数****)**

示例：

![70 17][]

最终代码：

<div id="myclock"></div>
 
 <input name="s" type="button" value="显示提示消息" onclick="timer()" />
 
 <script>
 
 function timer(){
 
 var t=setTimeout("alert('3 seconds')",3000);
 
 }
 
 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;
 
 var myTime＝setTimeout("disptime() ", 1000 ); }
 
 disptime()
 
 【如果要多次调用，使用setInterval( )或者让disptime( )自身再次调用setTimeout( )】
 
 </script>

**2.setInterval( )**

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

示例：

![70 18][]

<div id="myclock"></div>
 
 <input name="s" type="button" value="显示提示消息" onclick="timer()" />
 
 <script>
 
 function timer(){
 
 var t= setInterval ("alert('3 seconds')",3000);
 
 }
 
 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; }
 
 var myTime＝setInterval ("disptime() ", 1000 );
 
 </script>

## 清除函数： ##

### 1.clearTimeout( ) ###

语法：clearTimeout(setTimeOut()返回的ID值)

示例：

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

### 2.clearInterval () ###

语法：clearInterval(setInterval()返回的ID值)

示例：

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

![70 19][]

[70]: /images/20220512/6eed28f369a0453686427a80a283324e.png
[70 1]: /images/20220512/f5b0d07866ff4595953cad6684685ca6.png
[70 2]: /images/20220512/bc3c3a5070e34f049952bcfdc8322c68.png
[70 3]: /images/20220512/7be90147fe974877a2277ea9ab5207b1.png
[70 4]: /images/20220512/1345f317e4c144caa44991d2699dccc4.png
[70 5]: /images/20220512/58daa007f81844bfa51890d1715797dd.png
[70 6]: /images/20220512/9a1e4b0a12f948208af61e0ea86c18d2.png
[70 7]: /images/20220512/2654a7528f28448ba647fc8ba414a174.png
[70 8]: /images/20220512/602763e0e7324736b6567984be100114.png
[70 9]: https://img-blog.csdn.net/20180915221801958?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hbmppbnpodQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 10]: /images/20220512/e1969361680d4498811098da2af85925.png
[70 11]: /images/20220512/80bc48a1864f43dfa7d454723c31f5e9.png
[70 12]: /images/20220512/5cdf5157b8be49db955d486503ce0bd7.png
[70 13]: /images/20220512/5e60418dc83c4034a07158db6e3b031f.png
[70 14]: /images/20220512/2102814fb129497686e788e9d841cd9e.png
[70 15]: /images/20220512/aa693d14c6104d7483ed047c92db39bc.png
[70 16]: /images/20220512/d5242d921d184054a0f43a2b93a45683.png
[70 17]: /images/20220512/765ede7f996e4cec8baeb63d3b6026a1.png
[70 18]: /images/20220512/a8da9237a7674953b2afba52c488ab7f.png
[70 19]: /images/20220512/6544eb20d7f844ba926700eb59905aca.png