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没有相关的标准,所以根据浏览器的不同,其中定义的对象 ...
随机推荐
- harbor上传镜像
在harbor服务器 1. 下载测试上传使用的镜像docker pull hello-world2. 打tagdocker tag docker.io/hello-world:latest 172.1 ...
- js：把字符串转为变量使用； js下将字符串当函数去执行的方法
1 把字符串当变量使用 通过计算 string 得到的值(如果有的话).该方法只接受原始字符串作为参数 demo: var type = "car"; var newStr = & ...
- BFS练习
1. 给定$d,k$, 求最小的被$d$整除, 且各数位仅有$k$和$0$组成的数. $(1\le k\le 9,1\le n\le 1e6)$ 从高位到低位$BFS$, BFS求出字典序最小的方案. ...
- Oracle数据库导出txt格式工具sqlload2使用
开发需求:需要在数据库中查询数据,最终得到cxv表格形式数据. 使用plsql导出70M数据量非常慢,本次使用sqlload2工具,导出文本txt文本格式. 1)导出txt文本文件$ ./sqluld ...
- IDEA GIT 忽略文件 最佳方式
前言 转载一篇博客,简单,实用. 原文地址:intellij idea 忽略文件不提交 ps:下面均为转载博客的内容: 在intellij中忽略提交文件,分两种情况, 文件没有纳入版本管理 第一种,文 ...
- 十大经典排序【Java实现，手工作坊式】
终于把排序这个硬骨头,但是又很基础的知识点,自己手撕了一遍!之前,使用Python看着算法导论的书手撕过一遍,印象不是很深刻,容易忘记!好记性不如烂笔头!多自己思考解决问题 1,交换类CAS[最简单] ...
- JVM内存结构划分
JVM内存结构划分 JVM内存结构划分 数据区域划分 程序计数器 虚拟机栈 本地方法栈 堆 方法区 运行时常量池 StringTable 直接内存 创建新对象说明 对象的创建 对象的内存布局 对象头 ...
- linux:# vi /etc/profile -bash: vi: command not found 的解决办法
/bin/vi /etc/profile 直接用全路径vi,linux下一切皆文件,进去把profile文件内容改一下,一定是profile出了问题 export JAVA_HOME=/usr/jav ...
- [daily]使用iptables配置NAT的命令速查
时常,快速的配置一个临时的NAT环境是很常用需求. 但是,每次我都要读iptables的手册,才能配出来.所以,备忘一个速查. DNAT: iptables -t nat -A PREROUTING ...
- MongoDB C#samus驱动
MongoDB的c#驱动有两种,官方驱动和samus驱动,不过我更喜欢samus驱动,因为samus驱动提供了丰富的linq操作. 官方驱动:https://github.com/mongodb/mo ...