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没有相关的标准,所以根据浏览器的不同,其中定义的对象 ...
随机推荐
- （六）lucene之其他查询方式（组合查询，制定数字范围、指定字符串开头）
本章使用的是lucene5.3.0 指定数字范围查询 package com.shyroke.test; import java.io.IOException; import java.nio.fil ...
- 获取类的描述信息 DescriptionAttribute
static void Main(string[] args) { var attrs = typeof(TestClass).GetCustomAttributes(typeof(System.Co ...
- cli create ssl certkey
cli create ssl certkey ############################### # 创建CA密钥 create ssl rsakey bwsrv-root.key -ex ...
- Python练习_数据类型_day4
题目 1.作业 1,写代码,有如下列表,按照要求实现每一个功能 li = ["alex", "WuSir", "ritian", " ...
- java调用.net的webservice接口
要调用webservice,首先得有接口,用已经写好的接口地址在myEclipse的目标project中,右键->new web service client-> 选择JAX-WS方式,点 ...
- javascript--HTML DOM常用元素对象
二,Select:访问select元素 属性:.selectedIndex 获取select中当前选中项的下标 .options 获取select中所有的option元素 返回值为数组 .opti ...
- pycharm2017.3版本永久激活
1.下载破解文件 链接:https://pan.baidu.com/s/1nwI278l 密码:j3gt 2.修改检测文件 ,在文件后缀是vmoptions的 文件中加入(注意是文件中,不是文件后缀上 ...
- Nginx系列1.1：ubuntu16.04编译nginx-rtmp流媒体服务器
1.下载nginx和nginx-rtmp-module nginx官网:nginx.org tar.gz文件 解压缩命令: wget https://nginx.org/download/nginx- ...
- idou老师教你学Istio11 : 如何用Istio实现流量熔断
在之前的最佳实践中,已经带大家通过一系列的实践任务领略了Istio的无穷魅力.今天,将向大家介绍如何用Istio实现流量熔断. 熔断机制是创建弹性微服务应用程序的重要模式.熔断可以帮助您自由控制故障影 ...
- python实现pow函数（求n次幂，求n次方）
目录 类型一:求n次幂 类型二:求n开方 类型一:求n次幂 实现 pow(x, n),即计算 x 的 n 次幂函数.其中n为整数.pow函数的实现--leetcode 解法1:暴力法 不是常规意义上的 ...