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没有相关的标准,所以根据浏览器的不同,其中定义的对象 ...
随机推荐
- linux中的内核级防火墙（SELINUX）
SElinux是基于内核开发出来的一种安全机制,被称之为内核级加强型防火墙,有力的提升了系统的安全性. SElinux的作用分为两方面:1.在服务上面加上标签: 2.在功能上面限制功能 在linux系 ...
- substr函数索引创建测试
技术群里小伙伴,沟通说一条经常查询的SQL缓慢,单表SQL一个列作为条件,列是int数值类型,索引类型默认创建. 一.SQL文本substr函数索引创建测试 ,) nm1 ')需求,将上述SQL执行速 ...
- Http 与 Https区别
传统Http协议弊端 传统Http协议弊端是明文的,如果别人采用抓包分析可以获取到明文数据. 什么是Https协议 HTTPS(Hyper Text Transfer Protocol over Se ...
- java01_简介_开发环境
JAVA的前世今生 美国SUN(Stanford University Network)公司,在中国大陆的正式中文名为"太阳计算机系统(中国)有限公司",在中国台湾的正式中文名为& ...
- 创建多线程时，为何创建后需要Sleep？
后面的线程用到了前面线程初始的结构,sleep一下只是做到了使前一个线程初始化完成后后一个线程才开始运行.但这样不严格,需要同步机制.在么多个线程都要用的数据结构不要放到子线程内部去初始化,程序启动时 ...
- 串口工具kermit（ubuntu）
安装 # sudo apt-get install ckermit 配置 kermit启动时,会首先查找~/.kermrc,然后再遍历/etc/kermit/kermrc # vi /etc/kerm ...
- MRC下delegate 野指针问题
最近项目开发中,临时被调去修复一个页面返回时crash的问题.出现这个问题的原因也很巧合,正好服务地址在同事电脑上,也正巧网络请求响应时间狂慢!一个请求发出去回来的时间是40秒左右,要是在线上,肯定会 ...
- 理解JVM之JAVA运行时内存区域
java运行时内存区域划分为方法区,堆区,虚拟机栈区,本地方法栈,程序计数器.其中方法区跟堆区是线程共享的数据区,其他的是线程私有的数据区. 1.程序计数器 程序计数器(PC)是一块较小的内存,他是存 ...
- 新版mysql的配置文件my.ini位置
在网上的博客上找了好久的my.ini,一直找不到.最后发现原来新版本的mysql已经不把my.ini放在原始的安装目录了.而是放在了C:/ProgramData下.
- elasticsearch + kibana + x-pack + logstash_集群部署安装
elasticsearch 部分总体描述: 1.elasticsearch 的概念及特点.概念:elasticsearch 是一个基于 lucene 的搜索服务器.lucene 是全文搜索的一个框架. ...