关于BOM-window对象，history，location，document对象

比眉伴天荒 2022-03-25 16:30 311阅读 0赞

BOM指的是浏览器对象模型，是JavaScript的组成之一，提供了独立于内容的，与浏览器窗口进行交互的对象模型，就是用来管理窗口与窗口之间的通信，例如弹出一个新浏览器窗口，改变窗口大小等

1.  弹出新的浏览器窗口
2.  移动，关闭浏览器窗口以及调整窗口大小
3.  实现页面的前进和后退功能
4.  提供web浏览器详细信息的导航对象
5.  提供用户屏幕分辨率详细信息的屏幕对象
6.  支持cookies  
    下面是BOM模型图：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3Nzc0MTcx_size_16_color_FFFFFF_t_70]  
    其主要对象是window对象  
    window对象又称浏览器对象，当浏览器打开HTML文档时，通常会创建一个window对象，如果定义了多个框架，浏览器会为原始文档创建一个window对象，同时为每一个框架另外创建一个window对象。

window对象常用属性

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>history</td> 
   <td>有关客户访问过的URL的信息</td> 
  </tr> 
  <tr> 
   <td>location</td> 
   <td>有关当前URL的信息</td> 
  </tr> 
 </tbody> 
</table>

window对象的常用方法

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <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>

经常看到方法前面没有window，比如直接调用close（），而不用window.close(),是因为window对象是全局对象，所以可以省略不写

window常用事件

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onload</td> 
   <td>一个页面或图像完成加载</td> 
  </tr> 
  <tr> 
   <td>onmouseover</td> 
   <td>鼠标指针移动到某元素之上</td> 
  </tr> 
  <tr> 
   <td>onclick</td> 
   <td>鼠标单击某个对象</td> 
  </tr> 
  <tr> 
   <td>onkeydown</td> 
   <td>某个键盘按键按下</td> 
  </tr> 
  <tr> 
   <td>onchange</td> 
   <td>域的内容被改变</td> 
  </tr> 
 </tbody> 
</table>

history对象  
提供用户最近浏览过的URL列表  
方法有

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>方法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <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>

location对象

提供当前页面的URL信息，可以重新装载当前页面或载入新页面  
location对象属性

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <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> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>reload（）</td> 
   <td>重新加载当前文档</td> 
  </tr> 
  <tr> 
   <td>replace（）</td> 
   <td>用新的文档替换当前文档</td> 
  </tr> 
 </tbody> 
</table>

location对象常用的属性是href，通过对此属性设置不同的网址，从而达到跳转功能

<a href="javascript:location.href='index.html'">查看index页面</a>

document对象  
既是window对象的一部分，又代表了整个HTML文档，可用来访问页面中的所有元素

常用属性

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>referrer</td> 
   <td>返回载入当前文档的URL</td> 
  </tr> 
  <tr> 
   <td>URL</td> 
   <td>返回当前文档的URL</td> 
  </tr> 
 </tbody> 
</table>

**这里有一个要注意的点：关于referrer，如果当前文档不是通过超链接访问的，则document.referrer的值为null  
上网浏览某个页面时，由于不是由指定的页面进入的，系统将会提醒不能浏览本页面或直接跳转到其他页面，这样的功能实际上就是通过referrer属性来完成的。**

document对象的常用方法

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>getElementById()</td> 
   <td>返回对拥有指定id的第一个对象的引用</td> 
  </tr> 
  <tr> 
   <td>getElementsByName()</td> 
   <td>返回带有指定名称的对象的集合</td> 
  </tr> 
  <tr> 
   <td>getElementsByTagName()</td> 
   <td>返回带有指定标签名的对象的集合</td> 
  </tr> 
  <tr> 
   <td>write（）</td> 
   <td>向文档写文本，HTML表达式或JavaScript代码</td> 
  </tr> 
 </tbody> 
</table>

*  getElementById()一般用于访问div，图片，表单元素，网页标签等，但要求访问的对象的id是唯一的
 *  getElementsByName()与getElementById()相似，由于一个HTML文档中的name属性可能不唯一，所以一般用来访问一组相同name属性的元素，如具有相同name属性的单选按钮等
 *  getElementsByTagName()是按标签来访问页面元素的，一般用于访问一组相同的元素。如一组 ,一组图片等。

示例：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
     function changeLink(){
    	 document.getElementById("node").innerHTML="搜狐";
     }
     function all_input(){
    	 var allInput=document.getElementsByTagName("input");
    	 var sStr="";
    	 for(var i=0;i<allInput.length;i++){
    		 sStr+=allInput[i].value+"<br/>";
    	 }
    	 document.getElementById("s").innerHTML=sStr;
    	 
     }
     function s_input(){
    	 var allInput=document.getElementsByName("season");
    	 var sStr="";
    	 for(var i=0;i<allInput.length;i++){
    		 sStr+=allInput[i].value+"<br/>";
    	 }
    	 document.getElementById("s").innerHTML=sStr;
    	 
     }
     
     
     
    </script>
    </head>
    <body>
    
    <div id="node">新浪</div>
    <input name="b1" type="button" value="改变层内容" onclick="changeLink()"/><br/>
    <br/><input name="season" type="text" value="春">
    <input name="season" type="text" value="夏">
    <input name="season" type="text" value="秋">
    <input name="season" type="text" value="冬">
    <br/><input name="b2" type="button" value="显示input内容" onclick="all_input()"/>
    <input name="b3" type="button" value="显示season内容" onclick="s_input()"/>
    <p id="s" ></p> 
    
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3Nzc0MTcx_size_16_color_FFFFFF_t_70]: /images/20220325/dd68d251dbf44c2198fe990facbcb983.png