Javascript知识【BOM对象&元素内容体操作】

忘是亡心i 2023-10-01 23:22 3阅读 0赞

**目录**

1，BOM对象

1.1：BOM简述和消息框

1.2：location【重点】

1.3：history

2，元素内容体操作【本阶段重点】

--------------------

### 1，BOM对象 ###

#### 1.1：BOM简述和消息框 ####

将来一定会涉及到JS操作浏览器进行特效BOM对象进行完成

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

浏览器：IE，火狐，谷歌

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

一般情况下，window代表了BOM对象。

![9735ad964b6f4ec9a91d9cdf2fae9395.png][]

![9e4d90e4808c4c818bc1d27cfb0cca1c.png][]

![bbe63ac85ff748fbb58c6bdbb2848693.png][]

![30f3d6293841445d97b45bd26dc15324.png][]

#### 1.2：location【重点】 ####

![665f7dba33ba41d6b0148e2a12d8ee50.png][]

![1579e6ae9dce4cb0bd83e08403626706.png][]

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:492.65pt;"> &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;meta charset="UTF-8"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Title&lt;/title&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// console.log(location); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// console.log(location.host); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//alert(location.href); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function run() { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//页面进行地址跳转 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;location.href="http://www.czxy.com"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function run2() { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;location.search="?username=zhangsan&amp;pwd=123"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;href属性或search属性进行修改，都会导致当前页面进行跳转式刷新 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="button" value="点我跳转官网" onclick="run()"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="button" value="点我修改地址栏参数列表" onclick="run2()"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text"/&gt; &lt;/body&gt; &lt;/html&gt; </td> 
 </tr> 
 </tbody> 
</table>

#### 1.3：history ####

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:492.65pt;"> &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;meta charset="UTF-8"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;main&lt;/h1&gt; &lt;a href="02.html"&gt;02&lt;/a&gt; &lt;a href="03.html"&gt;03&lt;/a&gt; &lt;br/&gt; &lt;input type="button" value="back" onclick="history.back()"/&gt; &lt;input type="button" value="forward" onclick="history.forward()"/&gt; &lt;input type="button" value="back2" onclick="history.go(-1)"/&gt; &lt;input type="button" value="forward2" onclick="history.go(1)"/&gt; &lt;input type="button" value="back3" onclick="history.go(-2)"/&gt; &lt;/body&gt; &lt;/html&gt; </td> 
 </tr> 
 </tbody> 
</table>

![eb7057e27c034a36a068970089451901.png][]

go(-2) 向回跳2页，如果历史列表往回不足两页，停止进行功能。

### 2，元素内容体操作【本阶段重点】 ###

内容体

![cde35ba85d224025bd00fdf57eaed756.png][]

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:492.65pt;"> &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;meta charset="UTF-8"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Title&lt;/title&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function run1() { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//1、获取div &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var div = document.getElementById("d1"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//2、操作内容体 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;div.innerHTML = "&lt;font color='red'&gt;你好&lt;/font&gt;"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function run2() { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//1、获取div &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var div = document.getElementById("d1"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//2、操作内容体 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(div.innerHTML); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="d1"&gt;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;hr/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="button" value="点我设置div的内容体为'你好'" onclick="run1()"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="button" value="点我获取div内容体" onclick="run2()"/&gt; &lt;/body&gt; &lt;/html&gt; </td> 
 </tr> 
 </tbody> 
</table>

课堂练习题：

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:492.65pt;"> &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;meta charset="UTF-8"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Title&lt;/title&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function setDivInnerHTML() { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//1、获取文本框的值 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var value = document.getElementById("t1").value; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//2、获取div，设置div内容体 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("d1").innerHTML = value; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function getDivData() { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(document.getElementById("d1").innerHTML); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="d1"&gt;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;hr/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" id="t1" /&gt;&lt;br/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="button" value="点我设置div的内容体为输入框值" onclick="setDivInnerHTML()"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="button" value="点我获取div内容体" onclick="getDivData()"/&gt; &lt;/body&gt; &lt;/html&gt; </td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:492.65pt;"> &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;meta charset="UTF-8"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Title&lt;/title&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function run1() { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("d1").innerHTML+="AA"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function run2() { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var d1 = document.getElementById("d1"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;d1.innerHTML = "CC"+d1.innerHTML; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="d1"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;font color="#87ceeb"&gt;你好&lt;/font&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;hr/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="button" value="点我设置div的内容体尾部追加AA" onclick="run1()"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="button" value="点我设置div的内容体头部追加CC" onclick="run2()"/&gt; &lt;/body&gt; &lt;/html&gt; </td> 
 </tr> 
 </tbody> 
</table>

小结：

内容体操作：HTML代码

**内容体获取：元素.innerHTML**

**内容体设置：元素.innerHTML = "值";**

**内容体尾部追加：元素.innerHTML += "值";**

**内容体头部追加：元素.innerHTML = "值"+元素.innerHTML;**

[9735ad964b6f4ec9a91d9cdf2fae9395.png]: https://img-blog.csdnimg.cn/9735ad964b6f4ec9a91d9cdf2fae9395.png
[9e4d90e4808c4c818bc1d27cfb0cca1c.png]: https://img-blog.csdnimg.cn/9e4d90e4808c4c818bc1d27cfb0cca1c.png
[bbe63ac85ff748fbb58c6bdbb2848693.png]: https://img-blog.csdnimg.cn/bbe63ac85ff748fbb58c6bdbb2848693.png
[30f3d6293841445d97b45bd26dc15324.png]: https://img-blog.csdnimg.cn/30f3d6293841445d97b45bd26dc15324.png
[665f7dba33ba41d6b0148e2a12d8ee50.png]: https://img-blog.csdnimg.cn/665f7dba33ba41d6b0148e2a12d8ee50.png
[1579e6ae9dce4cb0bd83e08403626706.png]: https://img-blog.csdnimg.cn/1579e6ae9dce4cb0bd83e08403626706.png
[eb7057e27c034a36a068970089451901.png]: https://img-blog.csdnimg.cn/eb7057e27c034a36a068970089451901.png
[cde35ba85d224025bd00fdf57eaed756.png]: https://img-blog.csdnimg.cn/cde35ba85d224025bd00fdf57eaed756.png