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 ...
随机推荐
- AgileConfig-1.9.4 发布，支持 OpenTelemetry
Hello 大家好,最新版的 AgileConfig 1.9.4 发布了.现在它可以通过 OpenTelemetry 对外提供 logs,traces,metrics 三个维度的数据.用户可以自由选择 ...
- 13-flex
01 flex2个重要的概念 02 flex布局模型 03 flex相关属性 04 flex container相关属性 4.1 flex direction 不同的值会改变主轴的方向 4.2 fle ...
- linux中cp复制时处理软链接的两种方式
linux中cp复制时处理软链接的两种方式 cp -r -L 复制原始文件 cp -r -P 复制软链接本身
- python爬虫-request模块
1. requests 中的请求方法 HTTP 请求方法: requests.get(url, params=None, **kwargs) # GET 请求 requests.post(url, d ...
- WPF在.NET9中的重大更新：Windows 11 主题
在2023年的2月20日,在WPF的讨论区,WPF团队对路线的优先级发起了一次讨论. 对三个事项发起了投票. 第一个是Windows 11 主题 第二个是更新的控件 第三个是可空性注释 最终Windo ...
- CF1860C 题解
显然是一个博弈论题,考虑 dp. 定义状态 \(dp_i\) 表示先手走到 \(i\) 之后是否有必胜策略,不难发现以下几点: 若走到 \(i\) 之后无路可走,那么就必败. 若走到 \(i\) 之后 ...
- Ubuntu 查看用户历史记录
Ubuntu 查看用户历史记录 1. 查看用户命令行历史记录 1. 查看当前登录账号所属用户的历史命令行记录 打开命令行,输入 history 就会看到当前登录账号所属用户的历史记录 2. 查看系统所 ...
- win10 搭建 npm 环境
前言 最近,根据CSDN和博客园等文章的帮助下,搭建了一个npm的环境,现在将搭建过程记录下来,留作参考. 搭建过程 下载nodejs,我是使用的zip包安装的,安装包官网地址https://node ...
- 你有对 Vue 项目进行哪些优化？
(1)代码层面的优化 v-if 和 v-show 区分使用场景 computed 和 watch 区分使用场景 v-for 遍历必须为 item 添加 key,且避免同时使用 v-if 图片资源懒加载 ...
- Python潮流周刊的优惠券和精美电子书（EPUB、PDF、Markdown）
Python潮流周刊从 2023.05.13 连载至今,本周即将发布第 60 期,这意味着我们又要达成一个小小的里程碑啦! 每周坚持做分享,周复一周,这对自己的精力和意志是一项不小的挑战.于是,为了让 ...