BOM 相关知识总结
一：介绍BOM
1 1.什么是BOM?
2 DOM就是一套操作HTML标签的API(接口/方法/属性)
3 BOM就是一套操作浏览器的API(接口/方法/属性)
4
5 2.BOM中常见的对象
6 window: 代表整个浏览器窗口
7 注意: window是BOM中的一个对象, 并且是一个顶级的对象(全局)
8 Navigator: 代表当前浏览器的信息, 通过Navigator我们就能判断用户当前是什么浏览器
9 Location: 代表浏览器地址栏的信息, 通过Location我们就能设置或者获取当前地址信息
10 History: 代表浏览器的历史信息, 通过History来实现刷新/上一步/下一步
11 注意点: 出于隐私考虑, 我们并不能拿到用户所有的历史记录, 只能拿到当前的历史记录
12 Screen: 代表用户的屏幕信息
二：Navigator
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <script>
9 // Navigator: 代表当前浏览器的信息, 通过Navigator我们就能判断用户当前是什么浏览器
10 // console.log(window.navigator);
11 var agent = window.navigator.userAgent;
12 if(/chrome/i.test(agent)){
13 alert("当前是谷歌浏览器");
14 }else if(/firefox/i.test(agent)){
15 alert("当前是火狐浏览器");
16 }else if(/msie/i.test(agent)){
17 alert("当前是低级IE浏览器");
18 }else if("ActiveXObject" in window){
19 alert("当前是高级IE浏览器");
20 }
21 </script>
22 </body>
23 </html>
三：Loaction
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <button id="btn1">获取</button>
9 <button id="btn2">设置</button>
10 <button id="btn3">刷新</button>
11 <button id="btn4">强制刷新</button>
12 <script>
13 // Location: 代表浏览器地址栏的信息, 通过Location我们就能设置或者获取当前地址信息
14 let oBtn1 = document.querySelector("#btn1");
15 let oBtn2 = document.querySelector("#btn2");
16 let oBtn3 = document.querySelector("#btn3");
17 let oBtn4 = document.querySelector("#btn4");
18 // 获取当前地址栏的地址
19 oBtn1.onclick = function(){
20 console.log(window.location.href);
21 }
22 // 设置当前地址栏的地址
23 oBtn2.onclick = function(){
24 window.location.href = "http://www.baidu.com";
25 }
26 // 重新加载界面
27 oBtn3.onclick = function(){
28 window.location.reload();
29 }
30 oBtn4.onclick = function(){
31 window.location.reload(true);
32 }
33 </script>
34 </body>
35 </html>
四：History
History: 代表浏览器的历史信息, 通过History来实现刷新/前进/后退
注意点: 出于隐私考虑, 我们并不能拿到用户所有的历史记录, 只能拿到当前的历史记录 /*
注意点:
只有当前访问过其它的界面, 才能通过forward/go方法前进
如果给go方法传递1, 就代表前进1个界面, 传递2就代表进行2个界面
*/ window.history.forward();
window.history.go(1);
History: 代表浏览器的历史信息, 通过History来实现刷新/上一步/下一步
/*
注意点:
只有当前访问过其它的界面, back/go方法后退
如果给go方法传递-1, 就代表后退1个界面, 传递-2就代表后退2个界面
*/
// window.history.back();
window.history.go(-1);
五：获取元素宽高其它方式1
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 div{
12 width: 100px;
13 height: 100px;
14 padding: 50px;
15 border: 50px solid #000;
16 background: red;
17 background-clip: content-box;
18 }
19 </style>
20 </head>
21 <body>
22 <div id="box"></div>
23 <script>
24 /*
25 1.通过getComputedStyle获取宽高
26 1.1获取的宽高不包括 边框和内边距
27 1.2即可以获取行内设置的宽高也可以获取CSS设置的宽高
28 1.3只支持获取, 不支持设置
29 1.4只支持IE9及以上浏览器
30 */
31 /*
32 var oDiv = document.getElementById("box");
33 // oDiv.style.width = "166px";
34 // oDiv.style.height = "166px";
35 var style = getComputedStyle(oDiv);
36 // style.width = "166px";
37 // style.height = "166px";
38 console.log(style.width);
39 console.log(style.height);
40 */
41
42 /*
43 2.通过currentStyle属性获取宽高
44 2.1获取的宽高不包括 边框和内边距
45 2.2即可以获取行内设置的宽高也可以获取CSS设置的宽高
46 2.3只支持获取, 不支持设置
47 2.4只支持IE9以下浏览器
48 */
49 /*
50 var oDiv = document.getElementById("box");
51 // oDiv.style.width = "166px";
52 // oDiv.style.height = "166px";
53 var style = oDiv.currentStyle;
54 style.width = "166px";
55 style.height = "166px";
56 // console.log(style);
57 console.log(style.width);
58 console.log(style.height);
59 */
60
61 /*
62 3.通过style属性获取宽高
63 3.1获取的宽高不包括 边框和内边距
64 3.2只能获取内设置的宽高, 不能获取CSS设置的宽高
65 3.3可以获取也可以设置
66 3.4高级低级浏览器都支持
67 */
68 /*
69 var oDiv = document.getElementById("box");
70 oDiv.style.width = "166px";
71 oDiv.style.height = "166px";
72 console.log(oDiv.style.width);
73 console.log(oDiv.style.height);
74 */
75
76 /*
77 4.offsetWidth和offsetHeight
78 4.1获取的宽高包含 边框 + 内边距 + 元素宽高
79 4.2即可以获取行内设置的宽高也可以获取CSS设置的宽高
80 4.3只支持获取, 不支持设置
81 4.4高级低级浏览器都支持
82 */
83 /*
84 var oDiv = document.getElementById("box");
85 // oDiv.offsetWidth = "166px";
86 // oDiv.offsetHeight = "166px";
87 oDiv.style.width = "166px";
88 oDiv.style.height = "166px";
89 console.log(oDiv.offsetWidth);
90 console.log(oDiv.offsetHeight);
91 */
92
93 /*
94 1.getComputedStyle/currentStyle/style
95 获取的宽高不包括 边框和内边距
96 2.offsetWidth/offsetHeight
97 获取的宽高包括 边框和内边距
98
99 3.getComputedStyle/currentStyle/offsetXXX
100 只支持获取, 不支持设置
101 4.style
102 可以获取, 也可以设置
103
104 5.getComputedStyle/currentStyle/offsetXXX
105 即可以获取行内,也可以获取外链和内联样式
106 6.style
107 只能获取行内样式
108 */
109 </script>
110 </body>
111 </html>
六：获取元素位置之offset属性
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 .father{
12 width: 200px;
13 height: 200px;
14 margin-top: 100px;
15 margin-left: 100px;
16 background: blue;
17 overflow: hidden;
18 position: relative;
19 }
20 .son{
21 width: 100px;
22 height: 100px;
23 margin-top: 100px;
24 margin-left: 100px;
25 background: red;
26 }
27 </style>
28 </head>
29 <body>
30 <div class="father">
31 <div class="son"></div>
32 </div>
33 <script>
34 /*
35 1.offsetLeft和offsetTop作用
36 获取元素到第一个定位祖先元素之间的偏移位
37 如果没有祖先元素是定位的, 那么就是获取到body的偏移位
38 */
39 let oSDiv = document.querySelector(".son");
40 oSDiv.onclick = function () {
41 console.log(oSDiv.offsetLeft);
42 console.log(oSDiv.offsetTop);
43 }
44
45 </script>
46 </body>
47 </html>
七：offsetParent
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 .grand-father{
12 width: 300px;
13 height: 300px;
14 margin-top: 100px;
15 margin-left: 100px;
16 background: deeppink;
17 overflow: hidden;
18 position: relative;
19 }
20 .father{
21 width: 200px;
22 height: 200px;
23 margin-top: 100px;
24 margin-left: 100px;
25 background: blue;
26 overflow: hidden;
27 position: relative;
28 }
29 .son{
30 width: 100px;
31 height: 100px;
32 margin-top: 100px;
33 margin-left: 100px;
34 background: red;
35 }
36 </style>
37 </head>
38 <body>
39 <div class="grand-father">
40 <div class="father">
41 <div class="son"></div>
42 </div>
43 </div>
44 <script>
45 /*
46 1.offsetParent作用
47 获取元素的第一个定位祖先元素
48 如果没有祖先元素是定位的, 那么就是获取到的就是body
49 */
50 let oSDiv = document.querySelector(".son");
51 oSDiv.onclick = function () {
52 console.log(oSDiv.offsetParent);
53 }
54 </script>
55 </body>
56 </html>
八：client
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 div{
12 width: 100px;
13 height: 100px;
14 padding: 50px;
15 border: 50px solid #000;
16 background: red;
17 /* 除去padding中间的content */
18 background-clip: content-box;
19 }
20 </style>
21 </head>
22 <body>
23 <div id="box"></div>
24 <script>
25 /*
26 1.offsetWidth = 宽度 + 内边距 + 边框
27 offsetHeight = 高度 + 内边距 + 边框
28 2.clientWidth = 宽度 + 内边距
29 clientHeight = 高度 + 内边距
30 */
31 let oDiv = document.querySelector("div");
32 console.log(oDiv.clientWidth); //200
33 console.log(oDiv.clientHeight); //200
34
35 /*
36 1.offsetLeft/offsetTop: 距离第一个定位祖先元素偏移位 || body
37 2.clientLeft/clientTop: 左边框 和 顶部边框
38 */
39 console.log(oDiv.clientLeft); //50
40 console.log(oDiv.clientTop); //50
41
42 </script>
43 </body>
44 </html>
九：scroll
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 div{
12 width: 100px;
13 height: 100px;
14 padding: 50px;
15 border: 50px solid #000;
16 background: red;
17 background-clip: content-box;
18 color: deepskyblue;
19 overflow: auto;
20 }
21 </style>
22 </head>
23 <body>
24 <div id="box">
25 我是内容<br/>
26 我是内容<br/>
27 我是内容<br/>
28 我是内容<br/>
29 我是内容<br/>
30 我是内容<br/>
31 我是内容<br/>
32 我是内容<br/>
33 我是内容<br/>
34 我是内容<br/>
35 我是内容<br/>
36 我是内容<br/>
37 我是内容<br/>
38 我是内容<br/>
39 </div>
40 <script>
41 /*
42 1.内容没有超出元素范围时
43 scrollWidth: = 元素宽度 + 内边距宽度 == clientWidth
44 scrollHeight: = 元素高度 + 内边距的高度 == clientHeight
45 */
46 let oDiv = document.querySelector("div");
47 // console.log(oDiv.scrollWidth);
48 // console.log(oDiv.scrollHeight);
49 /*
50 2.内容超出元素范围时
51 scrollWidth: = 元素宽度 + 内边距宽度 + 超出的宽度
52 scrollHeight: = 元素高度 + 内边距的高度 + 超出的高度
53 */
54
55 /*
56 3.scrollTop / scrollLeft
57 scrollTop: 超出元素内边距顶部的距离
58 scrollLeft: 超出元素内边距左边的距离
59 */
60 // console.log(oDiv.scrollTop);
61 oDiv.onscroll = function () {
62 console.log(oDiv.scrollTop);
63 }
64 </script>
65 </body>
66 </html>
十：获取网页的宽高
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <script>
9 /*
10 // 注意点: innerWidth/innerHeight只能在IE9以及IE9以上的浏览器中才能获取
11 // console.log(window.innerWidth);
12 // console.log(window.innerHeight);
13
14 // 注意点: documentElement.clientWidth/documentElement.clientHeight
15 // 可以用于在IE9以下的浏览器的标准模式中获取
16 // 浏览器在渲染网页的时候有两种模式"标准模式"/"混杂模式/怪异模式"
17 // 默认情况下都是以标准模式来进行渲染的(CSS1Compat)
18 // 如果网页没有书写文档声明, 那么就会按照"混杂模式/怪异模式"来进行渲染的(BackCompat)
19 // documentElement --> HTML --> 整个网页
20 // console.log(document.documentElement);
21 // console.log(document.documentElement.clientWidth);
22 // console.log(document.documentElement.clientHeight);
23
24 // 注意点: 在混杂模式中利用如下的方式获取可视区域的宽高
25 // console.log(document.compatMode);// CSS1Compat
26 // console.log(document.body.clientWidth);
27 // console.log(document.body.clientHeight);
28 */
29
30 let {width, height} = getScreen();
31 alert(width);
32 alert(height);
33
34 function getScreen() {
35 let width, height;
36 if(window.innerWidth){
37 width = window.innerWidth;
38 height = window.innerHeight;
39 }else if(document.compatMode === "BackCompat"){
40 width = document.body.clientWidth;
41 height = document.body.clientHeight;
42 }else{
43 width = document.documentElement.clientWidth;
44 height = document.documentElement.clientHeight;
45 }
46 return {
47 width: width,
48 height: height
49 }
50 }
51 </script>
52 </body>
53 </html>
BOM 相关知识总结的更多相关文章
- HTML入门基础教程相关知识
HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...
- 【Python五篇慢慢弹（5）】类的继承案例解析，python相关知识延伸
类的继承案例解析,python相关知识延伸 作者:白宁超 2016年10月10日22:36:57 摘要:继<快速上手学python>一文之后,笔者又将python官方文档认真学习下.官方给 ...
- 移动WEB像素相关知识
了解移动web像素的知识,主要是为了切图时心中有数.本文主要围绕一个问题:怎样根据设备厂商提供的屏幕尺寸和物理像素得到我们切图需要的逻辑像素?围绕这个问题以iphone5为例讲解涉及到的web像素相关 ...
- listener监听器的相关知识
从别人的博客上我学习了listener的相关知识现在分享给大家 1.概念: 监听器就是一个实现特定接口的普通java程序,这个程序专门用于监听另一个java对象的方法调用或属性改变,当被监听对象发生上 ...
- UIViewController相关知识
title: UIViewController 相关知识date: 2015-12-13 11:50categories: IOS tags: UIViewController 小小程序猿我的博客:h ...
- 【转】java NIO 相关知识
原文地址:http://www.iteye.com/magazines/132-Java-NIO Java NIO(New IO)是从Java 1.4版本开始引入的一个新的IO API,可以替代标准的 ...
- NSString使用stringWithFormat拼接的相关知识
NSString使用stringWithFormat拼接的相关知识 保留2位小数点 1 2 3 4 //.2代表小数点后面保留2位(2代表保留的数量) NSString *string = [NSSt ...
- iOS网络相关知识总结
iOS网络相关知识总结 1.关于请求NSURLRequest? 我们经常讲的GET/POST/PUT等请求是指我们要向服务器发出的NSMutableURLRequest的类型; 我们可以设置Reque ...
- 电路相关知识--读<<继电器是如何成为CPU的>>
电路相关知识–读<<继电器是如何成为CPU的>> */--> *///--> *///--> 电路相关知识–读<<继电器是如何成为CPU的> ...
- 地址标记，SpringMVC转发与调用相关知识存档
1.mytest_mavenprj1中,index的 <a href="login/login.html">点击登录</a> 与 <a href=&q ...
随机推荐
- 制作tomcat镜像
本篇文章介绍用Dockerfile的方式构建Tomcat镜像,请保证安装了Docker环境. 首先创建/opt/tomcat目录,后续步骤都在该目录下进行操作. 准备好Jdk和Tomcat安装文件,放 ...
- 剖析 Kafka 消息丢失的原因
目录 前言 一.生产者导致消息丢失的场景 场景1:消息体太大 解决方案 : 1.减少生产者发送消息体体积 2.调整参数max.request.size 场景2:异步发送机制 解决方案 : 1.使用带回 ...
- RSA密码系统的特定密钥泄露攻击与Coppersmith方法的应用
PrimiHub一款由密码学专家团队打造的开源隐私计算平台,专注于分享数据安全.密码学.联邦学习.同态加密等隐私计算领域的技术和内容. RSA密码系统作为当前最广泛使用的公钥加密算法之一,其安全性依赖 ...
- 实验2.ARP实验
# 实验2.ARP实验 本实验用于验证arp以及arp表,arp缓存的使用,测试ping包时arp表的更新机制. 实验组 PC1 10.68.57.10 255.255.255.0 00-00-00- ...
- 韦东山freeRTOS系列教程之【第八章】事件组(event group)
目录 系列教程总目录 概述 8.1 事件组概念与操作 8.1.1 事件组的概念 8.1.2 事件组的操作 8.2 事件组函数 8.2.1 创建 8.2.2 删除 8.2.3 设置事件 8.2.4 等待 ...
- Nuxt3 的生命周期和钩子函数（十一）
title: Nuxt3 的生命周期和钩子函数(十一) date: 2024/7/5 updated: 2024/7/5 author: cmdragon excerpt: 摘要:本文详细介绍了Nux ...
- git使用教程及常用命令
1.初次本地git连接远程仓库,并提交代码到远程仓库 第一步 码云上创建仓库 第二步 在需要上传的项目处右键-->git bush here 第三步 初始化本地git库 git init 设定 ...
- PowerBuilder编程新思维6：装饰（用最简单的方式做框架）
To be, or not to be - that is the question. PowerBuilder编程新思维6:装饰(用最简单的方式做框架) 问题 这一章,是写得最艰难的一章,原因有四: ...
- webpack4.15.1 学习笔记(四) — Tree shaking
目录 Tree shaking 原理 标记效果 副作用代码不可被删除 如何实现 Tree shaking 的几种方法 总结 Tree shaking 本质上为了消除无用的js代码,减少加载文件体积的方 ...
- my-http-server 静态服务器源码学习实现缓存及压缩
目录 一.准备工作及流程说明 二.配置命令行 三.设置入口文件和渲染模板 四.my-http-server源码 一.准备工作及流程说明 一看这标题,大家可能一下子没有反应过来,到底是要干什么?那么就先 ...