javascript BOM基础

野性酷女 2024-04-17 06:06 29阅读 0赞

##### BOM 也叫浏览器对象模型，它提供了很多对象，用于访问浏览器的功能。 #####

BOM 缺少规范，每个浏览器提供商又按照自己想法去扩展它，那么浏览器共有对象就成了事实的标准。所以，BOM 本身是没有标准的或者还没有哪个组织去标准它。  
1、 window 对象  
BOM 的核心对象是 window，它表示浏览器的一个实例。window 对象处于 JavaScript结构的最顶层，对于每个打开的窗口，系统都会自动为其定义 window 对象。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]  
window 对象有一系列的属性，这些属性本身也是对象。本节不介绍呢么详细，只是介绍一下常用的属性

2、location 对象  
location 是 BOM 对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。事实上，location 对象是 window 对象的属性，也是 document 对象的属性；所以 window.location 和 document.location 等效。

alert(location); //获取当前的 URL

location 对象的属性

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述的URL 内容</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>hash</td> 
   <td>如果该部分存在，表示锚点部分</td> 
  </tr> 
  <tr> 
   <td>host</td> 
   <td>主机名：端口号</td> 
  </tr> 
  <tr> 
   <td>hostname</td> 
   <td>主机名</td> 
  </tr> 
  <tr> 
   <td>href</td> 
   <td>整个 URL</td> 
  </tr> 
  <tr> 
   <td>pathname</td> 
   <td>路径名</td> 
  </tr> 
  <tr> 
   <td>port</td> 
   <td>端口号</td> 
  </tr> 
  <tr> 
   <td>protocol</td> 
   <td>协议部分</td> 
  </tr> 
  <tr> 
   <td>search</td> 
   <td>查询字符串</td> 
  </tr> 
 </tbody> 
</table>

location 对象的方法

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>assign()</td> 
   <td>跳转到指定页面，与 href 等效</td> 
  </tr> 
  <tr> 
   <td>reload()</td> 
   <td>重载当前 URL</td> 
  </tr> 
  <tr> 
   <td>repalce()</td> 
   <td>用新的 URL 替换当前页面</td> 
  </tr> 
 </tbody> 
</table>

location.hash='#1'; //设置#后的字符串，并跳转
    	alert(location.hash); //获取#后的字符串
    	location.port=8888; //设置端口号，并跳转
    	alert(location.port); //获取当前端口号，
    	location.hostname='Lee'; //设置主机名，并跳转
    	alert(location.hostname); //获取当前主机名，
    	location.pathname='Lee'; //设置当前路径，并跳转，http://127.0.0.1:8848/Lee#1
    	alert(location.pathname); //获取当前路径，
    	location.protocal='ftp:'; //设置协议，没有跳转
    	alert(location.protocol); //获取当前协议
    	location.search='?id=5'; //设置?后的字符串，并跳转
    	alert(location.search); //获取?后的字符串
    	location.href='http://www.baidu.com'; //设置跳转的 URL，并跳转
    	alert(location.href); //获取当前的 URL

3、 history 对象  
history 对象是 window 对象的属性，它保存着用户上网的记录，从窗口被打开的那一刻算起。

history 对象的属性

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述 URL 中的哪部分</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>length</td> 
   <td>history 对象中的记录数</td> 
  </tr> 
 </tbody> 
</table>

history 对象的方法

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>back()</td> 
   <td>前往浏览器历史条目前一个 URL，类似后退</td> 
  </tr> 
  <tr> 
   <td>forward()</td> 
   <td>前往浏览器历史条目下一个 URL，类似前进</td> 
  </tr> 
  <tr> 
   <td>go(num)</td> 
   <td>浏览器在 history 对象中向前或向后</td> 
  </tr> 
 </tbody> 
</table>

4、 navigator 对象

Navigator 对象包含有关浏览器的信息。没有应用于 navigator 对象的公开标准，不过所有浏览器都支持该对象。navigator 对象最早由 NetscapeNavigator2.0 引入的 navigator 对象，现在已经成为识别客户端浏览器的事实标准。用于浏览器检测。与之前的 BOM 对象一样，每个浏览器中的 navigator 对象也都有一套自己的属性。

navigator 对象的属性或方法

<table> 
 <thead> 
  <tr> 
   <th>属性或方法</th> 
   <th>说明</th> 
   <th>IE</th> 
   <th>Firefox</th> 
   <th>Safari /Chrome</th> 
   <th>Opera</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>appCodeName</td> 
   <td>浏览器的名称。通常是Mozilla，即使在非 Mozilla浏览器中也是如此</td> 
   <td>3.0+</td> 
   <td>1.0+</td> 
   <td>1.0+</td> 
   <td>7.0+</td> 
  </tr> 
  <tr> 
   <td>appName</td> 
   <td>完整的浏览器名称</td> 
   <td>3.0+</td> 
   <td>1.0+</td> 
   <td>1.0+</td> 
   <td>7.0+</td> 
  </tr> 
  <tr> 
   <td>appMinorVersion</td> 
   <td>次版本信息</td> 
   <td>4.0+</td> 
   <td>-</td> 
   <td>-</td> 
   <td>9.5+</td> 
  </tr> 
  <tr> 
   <td>appVersion</td> 
   <td>浏览器的版本。一般不与实际的浏览器版本对应</td> 
   <td>3.0+</td> 
   <td>1.0+</td> 
   <td>1.0+</td> 
   <td>7.0+</td> 
  </tr> 
  <tr> 
   <td>buildID</td> 
   <td>浏览器编译版本</td> 
   <td>-</td> 
   <td>2.0+</td> 
   <td>-</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>cookieEnabled</td> 
   <td>表示 cookie 是否启用</td> 
   <td>4.0+</td> 
   <td>1.0+</td> 
   <td>1.0+</td> 
   <td>7.0+</td> 
  </tr> 
  <tr> 
   <td>cpuClass</td> 
   <td>客户端计算机中使用的 CPU 类 型(x86、68K、Alpha、PPC、other)4.0+ - - -javaEnabled() 表示当前浏览器中是否启用了Java</td> 
   <td>4.0+</td> 
   <td>1.0+</td> 
   <td>1.0+</td> 
   <td>7.0+</td> 
  </tr> 
  <tr> 
   <td>language</td> 
   <td>浏览器的主语言</td> 
   <td>-</td> 
   <td>1.0+</td> 
   <td>1.0+</td> 
   <td>7.0+</td> 
  </tr> 
 </tbody> 
</table>

等等不做介绍

不同的浏览器支持的功能、属性和方法各有不同。比如 IE 和 Firefox 显示的页面可能就会有所略微不同。常用例子：

alert('浏览器名称：'+navigator.appName);
    	alert('浏览器版本：'+navigator.appVersion);
    	alert('浏览器用户代理字符串：'+navigator.userAgent);
    	alert('浏览器所在的系统：'+navigator.platform);

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190826130711287.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70