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 ...
随机推荐
- 一行超长日志引发的 “血案” - Containerd 频繁 OOM 背后的真相
案发现场:混沌初现 2024年6月10日,本应是平静的一天.但从上午 9 点开始,Sealos 公有云的运维监控告警就开始不停地响.北京可用区服务器节点突然出现大量 "not ready&q ...
- pytest_fixture通过参数request获取测试数据，并在fixture方法里面使用
pytest fixture传参request的使用 获取request对pytest插件的版本有要求,如果找不到request报错的话, 建议先升级pytest的版本 要实现的效果 执行测试用例,调 ...
- Kubernetes 存储资源 PV、PVC 和StorageClass详解
一.存储机制介绍 在 Kubernetes 中,存储资源和计算资源(CPU.Memory)同样重要,Kubernetes 为了能让管理员方便管理集群中的存储资源,同时也为了让使用者使用存储更加方便,所 ...
- k8s学习总结之各组件功能及作用的详细介绍
K8S集群架构: 一个K8S集群是由两大部分组成: Master节点和Node节点 一.Master节点主要包括API Server.Scheduler.Controller manager.etcd ...
- PySide6之多线程
一.QThread 方法1:子类化创建多线程 创建子线程,继承自QThread类 在子线程中自定义信号 在子线程中重写 run() 方法,进行信号的触发 在主线程中实例化子线程 在主线程中对子线程的信 ...
- SpringBoot获取请求头信息
Http 头信息 HTTP 头(Header)是一种附加内容,独立于请求内容和响应内容. HTTP 协议中的大量特性都通过Header信息交互来实现,比如内容编解码.缓存.连接保活等等. reques ...
- GAIA: 一个严苛的智能体基准
简要概括 经过一些实验,我们对 Transformers 智能体构建智能体系统的性能印象深刻,因此我们想看看它有多好!我们使用一个 用库构建的代码智能体 在 GAIA 基准上进行测试,这可以说是最困难 ...
- 4 - 【RocketMQ 系列】CentOS 7.6 安装部署RocketMQ
五.自启动脚本 1.rocketmq 服务脚本 cd /etc/init.d vim rocketmq 把下面内容填好后 按ESC 再输入 :wq! 保存退出 之后再修改权限 chmod 777 ro ...
- 图的存储、创建、遍历、求最小生成树、最短路径（Java）
带权无向图 存储结构 存储结构选用邻接表. 当一个图为稀疏图时,使用邻接矩阵法显然要浪费大量的存储空间,而图的邻接表法结合了顺序存储和链式存储方法,大大减少了这种不必要的浪费. 当然,即使我们所处理的 ...
- [oeasy]python0028_直接运行_修改py文件执行权限_设置py文件打开方式
直接运行 回忆上次内容 我们把两个程序整合起来了 可以持续输出当前时间 每秒都更新 编辑 但是我想在 shell 里面 只输入文件名(./sleep.py)并回车 就能不断输出时间 可能吗? ...