JavaScript 中最常见的 BOM对象详解(四)

本是古典何须时尚 2023-02-23 08:49 9阅读 0赞

# 一.**BOM对象** #

## 1. **BOM简述** ##

作用：用来执行浏览器的相关操作。（例如：浏览器的地址、弹出消息等）

window对象-----BOM对象。

![20200706194606496.png][]

## 2.**消息框** ##

<table style="margin-left:-5.65pt;width:429.25pt;"> 
 <tbody> 
  <tr> 
   <td style="width:118.8pt;"> <p style="margin-left:0pt;"><strong><strong>函数名</strong></strong></p> </td> 
   <td style="width:310.45pt;"> <p style="margin-left:0pt;"><strong><strong>描述</strong></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:118.8pt;"> <p style="margin-left:0pt;">alert()</p> </td> 
   <td style="vertical-align:top;width:310.45pt;"> <p style="margin-left:0pt;">显示带有一段消息和一个确认按钮的<strong><strong>警告框</strong></strong>。</p> <p>&nbsp;</p> <p style="margin-left:0pt;"><img alt="" height="143" src="https://img-blog.csdnimg.cn/20200706194821892.png" width="321"></p> <p style="margin-left:0pt;">&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:118.8pt;"> <p style="margin-left:0pt;"><strong><span style="color:#ff0000;"><strong>confirm()</strong></span></strong></p> </td> 
   <td style="vertical-align:top;width:310.45pt;"> <p style="margin-left:0pt;">显示带有一段消息以及确认按钮和取消按钮的<strong><strong>确认框</strong></strong>。</p> <p style="margin-left:0pt;"><img alt="" height="163" src="https://img-blog.csdnimg.cn/20200706194815562.png" width="323"></p> <p style="margin-left:0pt;">&nbsp;</p> <p style="margin-left:0pt;">确认框：</p> <p style="margin-left:0pt;">&nbsp;&nbsp;确定返回true</p> <p style="margin-left:0pt;">&nbsp;&nbsp;取消返回false</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:118.8pt;"> <p style="margin-left:0pt;">prompt()</p> </td> 
   <td style="vertical-align:top;width:310.45pt;"> <p style="margin-left:0pt;">显示可提示用户输入的<strong><strong>提示框</strong></strong>。</p> <p style="margin-left:0pt;"><img alt="" height="249" src="https://img-blog.csdnimg.cn/20200706195010682.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx,size_16,color_FFFFFF,t_70" width="356"></p> <p style="margin-left:0pt;">&nbsp;</p> <p style="margin-left:0pt;">点击确定获得用户输入数据</p> </td> 
  </tr> 
 </tbody> 
</table>

代码:

## 3. **location对象** ##

location 对象包含浏览器 地址栏 的信息。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx_size_16_color_FFFFFF_t_70][]代码:

## 4. **history对象（了解）** ##

历史列表对象

![20200706195650572.png][]

代码:

# 二. **操作元素的内容体-innerHTML** #

<table style="width:492.65pt;"> 
 <tbody> 
  <tr> 
   <td style="width:187.65pt;"> <p style="margin-left:0pt;">属性名</p> </td> 
   <td style="width:305pt;"> <p style="margin-left:0pt;">属性说明</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:187.65pt;"> <p style="margin-left:0pt;"><strong><span style="color:#ff0000;"><strong>元素对象.innerHTML</strong></span></strong></p> </td> 
   <td style="vertical-align:top;width:305pt;"> <p style="margin-left:0pt;">获取某个元素的内容体信息</p> <p style="margin-left:0pt;">&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:187.65pt;"> <p style="margin-left:0pt;"><strong><span style="color:#ff0000;"><strong>元素对象</strong></span></strong><strong><span style="color:#ff0000;"><strong>.innerHTML=值</strong></span></strong></p> </td> 
   <td style="vertical-align:top;width:305pt;"> <p style="margin-left:0pt;">设置某个元素的内容体信息</p> </td> 
  </tr> 
 </tbody> 
</table>

代码:

看完恭喜你,又知道了一点点!!!

**你知道的越多,不知道的越多! **

**~感谢志同道合的你阅读,  你的支持是我学习的最大动力 ! ****加油 ,陌生人一起努力,共勉!!**

> **注: 如果本篇有需要改进的地方或错误,欢迎大神们指定一二~~**

[20200706194606496.png]: https://img-blog.csdnimg.cn/20200706194606496.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200706195302443.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx,size_16,color_FFFFFF,t_70
[20200706195650572.png]: https://img-blog.csdnimg.cn/20200706195650572.png