JavaScript中BOM的重要内容总结

一、BOM介绍

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

　　用来操作浏览器部分功能的API；

　　BOM由一系列的对象构成，由于主要用于管理窗口和窗口之间的通讯，所以核心对象是window。

二、BOM的结构

　　BOM中，主要是对象。比如：移动、调整浏览器大小的window对象；用于导航的location对象与history对象；获取浏览器、操作系统与用户屏幕信息的navigator与screen对象；可以使用document作为访问HTML文档的入口，管理框架的frames对象等。

三、BOM中的常用对象

3.1 window对象

　　(1)window对象是BOM的顶层（核心）对象。所有对象都是通过它延伸出来的。

　　(2)全局变量、自定义函数也是window对象的属性和方法。

　　(3)window对象下的属性和方法调用时，可以省略window。

　　例如：可以弹出系统对话框、打开（关闭）窗口　

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <!-- 需求： 点击按钮 打开新的窗口  路飞学城 -->
 9     <!-- a标签默认是在当前窗口打开新的网址 -->
10     <a href="http://www.luffycity.com" target="_blank">路飞</a>
11     <button>luffy</button>
12     <script type="text/javascript">
13         
14         var oBtn = document.getElementsByTagName('button')[0];
15         oBtn.onclick = function(){
16             // 默认在新的窗口打开 网址  _blank  
17             // window.open('http://www.baidu.com','_self');
18             // window可以省略不写
19             open('http://www.baidu.com','_self');
20             // 关闭窗口
21             // window.close();
22         }
23     </script>
24     
25 </body>
26 </html>

3.2 location对象

window.location可以简写成location。location相当于浏览器地址栏，可以将url解析成独立的片段。

location对象的属性部分如下图：、

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <!-- <form action="https://www.baidu.com/s" target = '_blank'>
 9         <input type="text" name="wd" placeholder="请输入城市">
10         <input type="submit" value="搜索">
11         
12     </form> -->
13     <script type="text/javascript">
14         
15         console.log(window.location);
16 
17         setTimeout(function(){
18             
19             location.href = 'https://www.baidu.com';
20         }, 5000)
21 
22     </script>
23     
24 </body>
25 </html>

3.3 history对象

　　3.3.1 前进：

　　　　　　history.go(1)

　　　　　　history.forward()

　　3.3.2 后退

　　　　　　history.gon(-1)

　　　　　　history.back()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <a href="./index.html">新网页</a>
 9     <button id="forward">前进</button>
10     <button id="refresh">刷新</button>
11     <script type="text/javascript">
12         alert(1);
13         
14         function $(id){
15             return document.getElementById(id);
16         }
17 
18         $('forward').onclick = function(){
19 
20             // 表示前进
21             window.history.go(1);
22         }
23         $('refresh').onclick =  function(){
24             // 表示刷新
25 
26             // 不常用  因为因为全局刷新
27             // window.history.go(0);
28             window.location.reload();
29             // 局部作用域刷新  使用的技术 ajax后面 介绍
30         }
31 
32     </script>
33 
34 </body>
35 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <button id="back">后退</button>
 9     <script type="text/javascript">
10         function $(id){
11             return document.getElementById(id);
12         }
13 
14         $('back').onclick = function(){
15 
16             // 表示后退
17             window.history.go(-1);
18         }
19 
20     </script>
21     
22 </body>
23 </html>

四、HTML5存储技术 localStorage sessionStorage

　　对浏览器来说，使用Web Storage比存储Cookie方式更加直观，而且容量更大。它包含localStorage和sessionStorage两种方式；

　　sessionStorage（临时存储）：为每一个数据维持一个存储区域，在浏览器打开期间存在，包括页面重新加载；

　　localStorage（长期存储）：与sessionStorage一样，但是浏览器关闭后，数据会一直存在；

　　sessionStorage和localStorage的用法基本一致，引用类型的值要转换成JSON。

　　(1)保存数据到本地

　　　　let info = { name: 'Lee', age: 20, id: '001' };

　　　　sessionStorage.setItem('key', JSON.stringify(info));

　　　　localStorage.setItem('key', JSON.stringify(info));

　　(2)从本地获取数据

　　　　var data1 = JSON.parse(sessionStorage.getItem('key'));

　　　　var data2 = JSON.parse(localStorage.getItem('key'));

　　(3)本地存储中删除某个保存的数据

　　　　sessionStorage.removeItem('key');

　　　　localStorage.removeItem('key');

　　(4)删除所有保存的数据

　　　　sessionStorage.clear();

　　　　localStorage.clear();

　　(5)监听本地存储的变化

　　　　window.addEventListener('storage', function (e) {

　　　　　　　　console.log('key', e.key);

　　　　　　　　console.log('oldValue', e.oldValue);

　　　　　　　　console.log('newValue', e.newValue);

　　　　　　　　console.log('url', e.url);

})

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 
 8 <body>
 9     <div>
10         <input type="text" name="user" id="user">
11         <input type="button" id="btn" value="保存">
12     </div>
13 
14     <ul id="lists">
15       
16     </ul>
17     <button id='clear'>清除</button>
18     <script type="text/javascript">
19 
20         var oBtn = document.getElementById('btn');
21         var oUser = document.getElementById('user');
22         var oLists = document.getElementById('lists');
23 
24         var li  = document.createElement('li');
25 
26         oBtn.onclick = function(){
27 
28             var val = oUser.value
29             localStorage.setItem('name', val);
30             oUser.value = '';
31             li.innerHTML = val;
32             oLists.appendChild(li)
33         }
34 
35         window.onload = function(){
36 
37             if (localStorage.getItem('name')) { //有值
38                 var value = localStorage.getItem('name');
39                 li.innerHTML = value;
40                 oLists.appendChild(li);
41 
42             }
43 
44             // document.getElementById('clear').onclick = function(){
45             //     localStorage.clear();
46             //     window.location.reload();
47             // }
48 
49             document.getElementById('clear').addEventListener('click',function(){
50                     localStorage.clear();
51                     window.location.reload();
52             },false);
53 
54             // removeEventListener(type: DOMString, callback: EventListener, capture?: boolean)
55         }
56         
57         // localStorage
58         // var arr = [{"title":"adad","done":false}];
59         // var name = 'alex'
60 
61     </script>
62 </body>
63 </html>

完！

JavaScript中BOM的重要内容总结

猜你喜欢