JS总结--------BOM常用对象

不念不忘少年蓝@ 2022-06-08 11:37 234阅读 0赞

这一章主要总结JS常用对象。  
首先解释一下Bom。  
BOM（Browser Object Mode）是浏览器对象模型，是Javascript的重要组成部分。它提供了一系列对象用于与浏览器窗口进行交互，这些对象通常统称为BOM。

首先列一下结构。  
![这里写图片描述][SouthEast]

下面一一对下面的对象进行解释分析：  
案列有机会再写，这里只总结概念。

## 1.window对象 ##

从图片我们看出来，Window对象是整个JS的根对象，代表整个浏览器操控，主要用来对浏览器窗口控制。  
window对象是一个全局对象，不需要特殊的语法，就可以对窗口的属性进行控制  
例如：  
可以直接使用document.方法()而不必使用window.document.方法()来调用  
而Window对象的方法可以直接使用名字来调用而不必使用window.方法()

##### **Window 对象属性** #####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>closed</td> 
   <td align="center">返回窗口是否已被关闭</td> 
  </tr> 
  <tr> 
   <td>defaultStatus</td> 
   <td align="center">设置或返回窗口状态栏中的默认文本。</td> 
  </tr> 
  <tr> 
   <td>document</td> 
   <td align="center">对 Document 对象的只读引用。</td> 
  </tr> 
  <tr> 
   <td>history</td> 
   <td align="center">对 History 对象的只读引用</td> 
  </tr> 
  <tr> 
   <td>innerheight</td> 
   <td align="center">返回窗口的文档显示区的高度。</td> 
  </tr> 
  <tr> 
   <td>innerwidth</td> 
   <td align="center">返回窗口的文档显示区的宽度。</td> 
  </tr> 
  <tr> 
   <td>length</td> 
   <td align="center">设置或返回窗口中的框架数量。</td> 
  </tr> 
  <tr> 
   <td>location</td> 
   <td align="center">用于窗口或框架的 Location 对象</td> 
  </tr> 
  <tr> 
   <td>name</td> 
   <td align="center">设置或返回窗口的名称。</td> 
  </tr> 
  <tr> 
   <td>Navigator</td> 
   <td align="center">对 Navigator 对象的只读引用</td> 
  </tr> 
  <tr> 
   <td>opener</td> 
   <td align="center">返回对创建此窗口的窗口的引用。</td> 
  </tr> 
  <tr> 
   <td>outerheight</td> 
   <td align="center">返回窗口的外部高度。</td> 
  </tr> 
  <tr> 
   <td>outerwidth</td> 
   <td align="center">返回窗口的外部宽度。</td> 
  </tr> 
  <tr> 
   <td>pageXOffset</td> 
   <td align="center">设置或返回当前页面相对于窗口显示区左上角的 X 位置。</td> 
  </tr> 
  <tr> 
   <td>pageYOffset</td> 
   <td align="center">设置或返回当前页面相对于窗口显示区左上角的 Y 位置。</td> 
  </tr> 
  <tr> 
   <td>parent</td> 
   <td align="center">返回父窗口。</td> 
  </tr> 
  <tr> 
   <td>Screen</td> 
   <td align="center">对 Screen 对象的只读引用</td> 
  </tr> 
  <tr> 
   <td>self</td> 
   <td align="center">返回对当前窗口的引用。等价于 Window 属性。</td> 
  </tr> 
  <tr> 
   <td>status</td> 
   <td align="center">设置窗口状态栏的文本。</td> 
  </tr> 
  <tr> 
   <td>top</td> 
   <td align="center">返回最顶层的先辈窗口。</td> 
  </tr> 
  <tr> 
   <td>window window</td> 
   <td align="center">属性等价于 self 属性，它包含了对窗口自身的引用。</td> 
  </tr> 
  <tr> 
   <td>screenLeft screenTop screenX screenY</td> 
   <td align="center">只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。</td> 
  </tr> 
 </tbody> 
</table>

#### **Window 对象方法** ####

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>alert()</td> 
   <td align="center">显示带有一段消息和一个确认按钮的警告框。</td> 
  </tr> 
  <tr> 
   <td>blur()</td> 
   <td align="center">把键盘焦点从顶层窗口移开。</td> 
  </tr> 
  <tr> 
   <td>clearInterval()</td> 
   <td align="center">取消由 setInterval() 设置的 timeout。</td> 
  </tr> 
  <tr> 
   <td>clearTimeout()</td> 
   <td align="center">取消由 setTimeout() 方法设置的 timeout。</td> 
  </tr> 
  <tr> 
   <td>close()</td> 
   <td align="center">关闭浏览器窗口。</td> 
  </tr> 
  <tr> 
   <td>confirm()</td> 
   <td align="center">显示带有一段消息以及确认按钮和取消按钮的对话框。</td> 
  </tr> 
  <tr> 
   <td>createPopup()</td> 
   <td align="center">创建一个 pop-up 窗口。</td> 
  </tr> 
  <tr> 
   <td>focus()</td> 
   <td align="center">把键盘焦点给予一个窗口。</td> 
  </tr> 
  <tr> 
   <td>moveBy()</td> 
   <td align="center">可相对窗口的当前坐标把它移动指定的像素。</td> 
  </tr> 
  <tr> 
   <td>moveTo()</td> 
   <td align="center">把窗口的左上角移动到一个指定的坐标。</td> 
  </tr> 
  <tr> 
   <td>open()</td> 
   <td align="center">打开一个新的浏览器窗口或查找一个已命名的窗口。</td> 
  </tr> 
  <tr> 
   <td>print()</td> 
   <td align="center">打印当前窗口的内容。</td> 
  </tr> 
  <tr> 
   <td>prompt()</td> 
   <td align="center">显示可提示用户输入的对话框。</td> 
  </tr> 
  <tr> 
   <td>resizeBy()</td> 
   <td align="center">按照指定的像素调整窗口的大小。</td> 
  </tr> 
  <tr> 
   <td>resizeTo()</td> 
   <td align="center">把窗口的大小调整到指定的宽度和高度。</td> 
  </tr> 
  <tr> 
   <td>scrollBy()</td> 
   <td align="center">按照指定的像素值来滚动内容。</td> 
  </tr> 
  <tr> 
   <td>scrollTo()</td> 
   <td align="center">把内容滚动到指定的坐标。</td> 
  </tr> 
  <tr> 
   <td>setInterval()</td> 
   <td align="center">按照指定的周期（以毫秒计）来调用函数或计算表达式。</td> 
  </tr> 
  <tr> 
   <td>setTimeout()</td> 
   <td align="center">在指定的毫秒数后调用函数或计算表达式。</td> 
  </tr> 
 </tbody> 
</table>

## 2.document对象 ##

document对象是window的一个属性，可以用来处理页面文档，方法很多  
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

<table> 
 <thead> 
  <tr> 
   <th>属性 方法</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>document.activeElement</td> 
   <td align="center">返回当前获取焦点元素</td> 
  </tr> 
  <tr> 
   <td>document.addEventListener()</td> 
   <td align="center">向文档添加句柄</td> 
  </tr> 
  <tr> 
   <td>document.adoptNode(node)</td> 
   <td align="center">从另外一个文档返回 adapded 节点到当前文档。</td> 
  </tr> 
  <tr> 
   <td>document.anchors</td> 
   <td align="center">返回对文档中所有 Anchor 对象的引用。</td> 
  </tr> 
  <tr> 
   <td>document.applets</td> 
   <td align="center">返回对文档中所有 Applet 对象的引用。</td> 
  </tr> 
  <tr> 
   <td>document.baseURI</td> 
   <td align="center">返回文档的绝对基础 URI</td> 
  </tr> 
  <tr> 
   <td>document.body</td> 
   <td align="center">返回文档的body元素</td> 
  </tr> 
  <tr> 
   <td>document.close()</td> 
   <td align="center">关闭用 document.open() 方法打开的输出流，并显示选定的数据。</td> 
  </tr> 
  <tr> 
   <td>document.cookie</td> 
   <td align="center">设置或返回与当前文档有关的所有 cookie。</td> 
  </tr> 
  <tr> 
   <td>document.createAttribute()</td> 
   <td align="center">创建一个属性节点</td> 
  </tr> 
  <tr> 
   <td>document.createComment()</td> 
   <td align="center">createComment() 方法可创建注释节点。</td> 
  </tr> 
  <tr> 
   <td>document.createElement()</td> 
   <td align="center">创建元素节点。</td> 
  </tr> 
  <tr> 
   <td>document.createTextNode()</td> 
   <td align="center">创建文本节点。</td> 
  </tr> 
  <tr> 
   <td>document.doctype</td> 
   <td align="center">返回与文档相关的文档类型声明 (DTD)。</td> 
  </tr> 
  <tr> 
   <td>document.documentElement</td> 
   <td align="center">返回文档的根节点</td> 
  </tr> 
  <tr> 
   <td>document.documentMode</td> 
   <td align="center">返回用于通过浏览器渲染文档的模式</td> 
  </tr> 
  <tr> 
   <td>document.documentURI</td> 
   <td align="center">设置或返回文档的位置</td> 
  </tr> 
  <tr> 
   <td>document.domain</td> 
   <td align="center">返回当前文档的域名。</td> 
  </tr> 
  <tr> 
   <td>document.domConfig</td> 
   <td align="center">返回normalizeDocument()被调用时所使用的配置</td> 
  </tr> 
  <tr> 
   <td>document.embeds</td> 
   <td align="center">返回文档中所有嵌入的内容（embed）集合</td> 
  </tr> 
  <tr> 
   <td>document.forms</td> 
   <td align="center">返回对文档中所有 Form 对象引用。</td> 
  </tr> 
  <tr> 
   <td>document.getElementsByClassName()</td> 
   <td align="center">返回文档中所有指定类名的元素集合，作为 NodeList 对象</td> 
  </tr> 
  <tr> 
   <td>document.getElementById()</td> 
   <td align="center">返回对拥有指定 id 的第一个对象的引用。</td> 
  </tr> 
  <tr> 
   <td>document.getElementsByName()</td> 
   <td align="center">返回带有指定名称的对象集合。</td> 
  </tr> 
  <tr> 
   <td>document.getElementsByTagName()</td> 
   <td align="center">返回带有指定标签名的对象集合。</td> 
  </tr> 
  <tr> 
   <td>document.images</td> 
   <td align="center">返回对文档中所有 Image 对象引用。</td> 
  </tr> 
  <tr> 
   <td>document.implementation</td> 
   <td align="center">返回处理该文档的 DOMImplementation 对象。</td> 
  </tr> 
  <tr> 
   <td>document.links</td> 
   <td align="center">返回对文档中所有 Area 和 Link 对象引用。</td> 
  </tr> 
  <tr> 
   <td>document.normalize()</td> 
   <td align="center">删除空文本节点，并连接相邻节点</td> 
  </tr> 
  <tr> 
   <td>document.normalizeDocument()</td> 
   <td align="center">删除空文本节点，并连接相邻节点的</td> 
  </tr> 
  <tr> 
   <td>document.open()</td> 
   <td align="center">打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。</td> 
  </tr> 
  <tr> 
   <td>document.querySelector()</td> 
   <td align="center">返回文档中匹配指定的CSS选择器的第一元素</td> 
  </tr> 
  <tr> 
   <td>document.querySelectorAll()</td> 
   <td align="center">document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表</td> 
  </tr> 
  <tr> 
   <td>document.readyState</td> 
   <td align="center">返回文档状态 (载入中……)</td> 
  </tr> 
  <tr> 
   <td>document.referrer</td> 
   <td align="center">返回载入当前文档的文档的 URL。</td> 
  </tr> 
  <tr> 
   <td>document.removeEventListener()</td> 
   <td align="center">移除文档中的事件句柄(由 addEventListener() 方法添加)</td> 
  </tr> 
  <tr> 
   <td>document.renameNode()</td> 
   <td align="center">重命名元素或者属性节点。</td> 
  </tr> 
  <tr> 
   <td>document.scripts</td> 
   <td align="center">返回页面中所有脚本的集合。</td> 
  </tr> 
  <tr> 
   <td>document.strictErrorChecking</td> 
   <td align="center">设置或返回是否强制进行错误检查。</td> 
  </tr> 
  <tr> 
   <td>document.title</td> 
   <td align="center">返回当前文档的标题。</td> 
  </tr> 
  <tr> 
   <td>document.URL</td> 
   <td align="center">返回文档完整的URL</td> 
  </tr> 
  <tr> 
   <td>document.write()</td> 
   <td align="center">向文档写 HTML 表达式 或 JavaScript 代码。</td> 
  </tr> 
  <tr> 
   <td>document.writeln()</td> 
   <td align="center">等同于 write() 方法，不同的是在每个表达式之后写一个换行符。</td> 
  </tr> 
 </tbody> 
</table>

## 3.frame对象 ##

*  frame对象是整个浏览器窗口的子窗口,除了status,defaultStatus,name属性外,它拥有window对象的全部属性.
 *  该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架或 iframe。属性 frames.length  
    存放数组 frames\[\] 中含有的元素个数。  
    这里就不复述了。

## 4.screen对象 ##

Screen 对象包含有关客户端显示屏幕的信息  
主要用来获取用户的屏幕信息，并作出优化

#### **Screen 对象属性** ####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>availHeight</td> 
   <td align="center">返回显示屏幕的高度 (除 Windows 任务栏之外)。</td> 
  </tr> 
  <tr> 
   <td>availWidth</td> 
   <td align="center">返回显示屏幕的宽度 (除 Windows 任务栏之外)。</td> 
  </tr> 
  <tr> 
   <td>bufferDepth</td> 
   <td align="center">设置或返回调色板的比特深度。</td> 
  </tr> 
  <tr> 
   <td>colorDepth</td> 
   <td align="center">返回目标设备或缓冲器上的调色板的比特深度。</td> 
  </tr> 
  <tr> 
   <td>deviceXDPI</td> 
   <td align="center">返回显示屏幕的每英寸水平点数。</td> 
  </tr> 
  <tr> 
   <td>deviceYDPI</td> 
   <td align="center">返回显示屏幕的每英寸垂直点数。</td> 
  </tr> 
  <tr> 
   <td>fontSmoothingEnabled</td> 
   <td align="center">返回用户是否在显示控制面板中启用了字体平滑。</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td align="center">返回显示屏幕的高度。</td> 
  </tr> 
  <tr> 
   <td>logicalXDPI</td> 
   <td align="center">返回显示屏幕每英寸的水平方向的常规点数。</td> 
  </tr> 
  <tr> 
   <td>logicalYDPI</td> 
   <td align="center">返回显示屏幕每英寸的垂直方向的常规点数。</td> 
  </tr> 
  <tr> 
   <td>pixelDepth</td> 
   <td align="center">返回显示屏幕的颜色分辨率（比特每像素）。</td> 
  </tr> 
  <tr> 
   <td>updateInterval</td> 
   <td align="center">设置或返回屏幕的刷新率。</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td align="center">返回显示器屏幕的宽度。</td> 
  </tr> 
 </tbody> 
</table>

## 5.history对象 ##

History 对象包含用户（在浏览器窗口中）访问过的 URL  
主要实现前进后退等功能

#### **History 对象属性** ####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>length</td> 
   <td align="center">返回历史列表中的网址数</td> 
  </tr> 
 </tbody> 
</table>

#### **History 对象方法** ####

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>back()</td> 
   <td align="center">加载 history 列表中的前一个 URL</td> 
  </tr> 
  <tr> 
   <td>forward()</td> 
   <td align="center">加载 history 列表中的下一个 URL</td> 
  </tr> 
  <tr> 
   <td>go()</td> 
   <td align="center">加载 history 列表中的某个具体页面</td> 
  </tr> 
 </tbody> 
</table>

## 6.navigator对象 ##

很重要，包含了一系列浏览器信息的属性  
从属性里面流可以看出来主要作用

#### **Navigator 对象属性** ####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>appCodeName</td> 
   <td align="center">返回浏览器的代码名。</td> 
  </tr> 
  <tr> 
   <td>appMinorVersion</td> 
   <td align="center">返回浏览器的次级版本。</td> 
  </tr> 
  <tr> 
   <td>appName</td> 
   <td align="center">返回浏览器的名称。</td> 
  </tr> 
  <tr> 
   <td>appVersion</td> 
   <td align="center">返回浏览器的平台和版本信息。</td> 
  </tr> 
  <tr> 
   <td>browserLanguage</td> 
   <td align="center">返回当前浏览器的语言。</td> 
  </tr> 
  <tr> 
   <td>cookieEnabled</td> 
   <td align="center">返回指明浏览器中是否启用 cookie 的布尔值。</td> 
  </tr> 
  <tr> 
   <td>cpuClass</td> 
   <td align="center">返回浏览器系统的 CPU 等级。</td> 
  </tr> 
  <tr> 
   <td>onLine</td> 
   <td align="center">返回指明系统是否处于脱机模式的布尔值。</td> 
  </tr> 
  <tr> 
   <td>platform</td> 
   <td align="center">返回运行浏览器的操作系统平台。</td> 
  </tr> 
  <tr> 
   <td>systemLanguage</td> 
   <td align="center">返回 OS 使用的默认语言。</td> 
  </tr> 
  <tr> 
   <td>userAgent</td> 
   <td align="center">返回由客户机发送服务器的 user-agent 头部的值。</td> 
  </tr> 
  <tr> 
   <td>userLanguage</td> 
   <td align="center">返回 OS 的自然语言设置。</td> 
  </tr> 
 </tbody> 
</table>

#### **Navigator 对象方法** ####

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>javaEnabled()</td> 
   <td align="center">规定浏览器是否启用 Java。</td> 
  </tr> 
  <tr> 
   <td>taintEnabled()</td> 
   <td align="center">规定浏览器是否启用数据污点 (data tainting)。</td> 
  </tr> 
 </tbody> 
</table>

## 7.location对象 ##

location对象是window对象和document对象的属性，用来分析和设置页面的URL地址  
Location 对象存储在 Window 对象的 Location 属性中，表示那个窗口中当前显示的文档的 Web 地址。它的 href 属性存放的是文档的完整 URL，其他属性则分别描述了 URL 的各个部分。  
常用于对URL进行访问。

#### **Location 对象属性** ####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>hash</td> 
   <td align="center">设置或返回从井号 (#) 开始的 URL（锚）。</td> 
  </tr> 
  <tr> 
   <td>host</td> 
   <td align="center">设置或返回主机名和当前 URL 的端口号。</td> 
  </tr> 
  <tr> 
   <td>hostname</td> 
   <td align="center">设置或返回当前 URL 的主机名。</td> 
  </tr> 
  <tr> 
   <td>href</td> 
   <td align="center">设置或返回完整的 URL。</td> 
  </tr> 
  <tr> 
   <td>pathname</td> 
   <td align="center">设置或返回当前 URL 的路径部分。</td> 
  </tr> 
  <tr> 
   <td>port</td> 
   <td align="center">设置或返回当前 URL 的端口号。</td> 
  </tr> 
  <tr> 
   <td>protocol</td> 
   <td align="center">设置或返回当前 URL 的协议。</td> 
  </tr> 
  <tr> 
   <td>search</td> 
   <td align="center">设置或返回从问号 (?) 开始的 URL（查询部分）。</td> 
  </tr> 
 </tbody> 
</table>

#### **Location 对象方法** ####

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>assign()</td> 
   <td align="center">加载新的文档。</td> 
  </tr> 
  <tr> 
   <td>reload()</td> 
   <td align="center">重新加载当前文档。</td> 
  </tr> 
  <tr> 
   <td>replace()</td> 
   <td align="center">用新的文档替换当前文档。</td> 
  </tr> 
 </tbody> 
</table>

[SouthEast]: /images/20220608/766768862bbc44c490f723c10dd4a4c9.png