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。
例如：可以弹出系统对话框、打开（关闭）窗口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 需求： 点击按钮 打开新的窗口 路飞学城 -->
<!-- a标签默认是在当前窗口打开新的网址 -->
<a href="http://www.luffycity.com" target="_blank">路飞</a>
<button>luffy</button>
<script type="text/javascript"> var oBtn = document.getElementsByTagName('button')[0];
oBtn.onclick = function(){
// 默认在新的窗口打开 网址 _blank
// window.open('http://www.baidu.com','_self');
// window可以省略不写
open('http://www.baidu.com','_self');
// 关闭窗口
// window.close();
}
</script> </body>
</html>
3.2 location对象
window.location可以简写成location。location相当于浏览器地址栏，可以将url解析成独立的片段。
location对象的属性部分如下图：、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- <form action="https://www.baidu.com/s" target = '_blank'>
<input type="text" name="wd" placeholder="请输入城市">
<input type="submit" value="搜索"> </form> -->
<script type="text/javascript"> console.log(window.location); setTimeout(function(){ location.href = 'https://www.baidu.com';
}, 5000) </script> </body>
</html>
3.3 history对象
3.3.1 前进：
history.go(1)
history.forward()
3.3.2 后退
history.gon(-1)
history.back()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="./index.html">新网页</a>
<button id="forward">前进</button>
<button id="refresh">刷新</button>
<script type="text/javascript">
alert(1); function $(id){
return document.getElementById(id);
} $('forward').onclick = function(){ // 表示前进
window.history.go(1);
}
$('refresh').onclick = function(){
// 表示刷新 // 不常用 因为因为全局刷新
// window.history.go(0);
window.location.reload();
// 局部作用域刷新 使用的技术 ajax后面 介绍
} </script> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="back">后退</button>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
} $('back').onclick = function(){ // 表示后退
window.history.go(-1);
} </script> </body>
</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);
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<div>
<input type="text" name="user" id="user">
<input type="button" id="btn" value="保存">
</div> <ul id="lists"> </ul>
<button id='clear'>清除</button>
<script type="text/javascript"> var oBtn = document.getElementById('btn');
var oUser = document.getElementById('user');
var oLists = document.getElementById('lists'); var li = document.createElement('li'); oBtn.onclick = function(){ var val = oUser.value
localStorage.setItem('name', val);
oUser.value = '';
li.innerHTML = val;
oLists.appendChild(li)
} window.onload = function(){ if (localStorage.getItem('name')) { //有值
var value = localStorage.getItem('name');
li.innerHTML = value;
oLists.appendChild(li); } // document.getElementById('clear').onclick = function(){
// localStorage.clear();
// window.location.reload();
// } document.getElementById('clear').addEventListener('click',function(){
localStorage.clear();
window.location.reload();
},false); // removeEventListener(type: DOMString, callback: EventListener, capture?: boolean)
} // localStorage
// var arr = [{"title":"adad","done":false}];
// var name = 'alex' </script>
</body>
</html>
完！
JavaScript中BOM的重要内容总结的更多相关文章
- javascript中BOM部分基础知识总结
一.什么是BOM BOM(Browser Object Document)即浏览器对象模型. BOM提供了独立于内容 而与浏览器窗口进行交互的对象: 由于BOM主要用于管 ...
- javaScript中BOM
BOM是browser object model的缩写,简称浏览器对象模型 主要处理浏览器窗口(window)和框架(iframe),简述了与浏览器进行交互的方法和接口, 可以对浏览器窗口进行访问和操 ...
- JavaScript中BOM的基础知识总结
一.什么是BOM BOM(Browser Object Model)即浏览器对象模型. BOM提供了独立于内容 而与浏览器窗口进行交互的对象: 由于BOM主要用于管理窗口 ...
- 理解JavaScript中BOM和DOM的关系
JavaScript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,IE和其他的浏览器风格迥异.对象是JavaScript最重要的API,包含 ...
- 【你不知道的javaScript 上卷 笔记6】javaScript中的对象相关内容
一.创建一个对象的语法 var myObj = { key: value // ... };//字面量 var myObj = new Object(); //new myObj.key = valu ...
- JavaScript 中BOM的常用操作
JavaScript BOM操作 1.获取浏览器窗口尺寸 var width=window,innerWidth //获取可视窗口宽度 var height=window.innerHeight // ...
- JavaScript中BOM与DOM的使用
BOM: 概念:Browser Object Model 浏览器对象模型 将浏览器的各个组成部分封装成对象. 组成: Window:窗口对象 Navigator:浏览器对象 Screen:显示器屏幕对 ...
- javascript中的所有内容都是一个对象：字符串、值、数组、函数…
javascript中的所有内容都是一个对象:字符串.值.数组.函数…此外,javascript允许自定义对象.javascript对象JavaScript提供多个内置对象,如字符串.日期.数组等.对 ...
- 【学习笔记】：JavaScript中的BOM对象
JavaScript中的BOM对象 BOM(Browser Object Model):浏览器对象模型. BOM可用于对浏览器窗口进行访问,但BOM没有相关的标准,所以根据浏览器的不同,其中定义的对象 ...
随机推荐
- redis哈希表数据类型键的设置
命令名称:hset 语法:hset key field value 功能: 1)将哈希表key中的域field的值设为value. 2)如果key不存在,一个新的哈希表被创建并进行hset操作. 3) ...
- HTTP抓包
1 概述 wireshark:全平台抓包工具,需要图形化界面,十分强大: httpry:http抓包插件,功能一般,操作简单: tcpdump:强大的抓包插件,支持多种网络协议. 2 httpry ( ...
- tiny-Spring【2】逐步step分析-新加入特性
tiny-Spring是黄亿华大佬自己写的一个集合IOC和AOP于一身的一种轻量级[教学用]Spring框架,它的github库地址为:https://github.com/code4craft/ti ...
- .htaccess 转 SAE AppConfig
新浪的SAE不支持 htaccess,但是他们开发了 AppConfig,可以完全代替 htaccess 的常见功能,AppConfig采用类自然语言的规则描述,还是很人性化的. 这里来写一个短网址的 ...
- Python 生成动态变量 调用动态变量
动态生成变量: variable = locals() for i in range(10): variable['A'+str(i)] = 123 print(A8) 调用动态变量: v = loc ...
- 关于Vue中，在方法中使用(操作)子组件获取到的数据
已知,子组件通过props获取父组件传过来的数据,而这个数据是无法在created.mounted生命周期中使用的,只能在beforeUpdated或者updated获取到: 但是如果我们要使用这个数 ...
- class类 - static
不需要实例化类,即可直接通过该类来调用的方法,即称之为"静态方法".将类中的方法设为静态方法也很简单,在方法前加上static关键字即可.这样该方法就不会被实例继承! class ...
- sql计算两个时间之间的差，并用时分秒表示
这是自己写的方法,总觉得会有更好的办法实现这个效果呢? SELECT then ))))+'秒' then )))+'秒' then ))+'秒' else CONVERT(nvarchar,DATE ...
- 【转】Linux编译链接问题----静态库和动态库
Linux静态库和动态库的命名规则 静态函数库 静态库的名字一般是libxxx.a,利用静态库编译生成的文件比较大,因为整个静态库所有的数据都会被整合进目标代码中. a) 优点: 编译后,可执行文件不 ...
- CentOS6.9 Python环境配置（python2.7、pip、virtualenv）
python2.7 yum install -y zlib zlib-devel openssl openssl-devel mysql-devel gcc gcc-c++ wget https:// ...