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 ...
随机推荐
- 小米便签AS部署之Git的基本使用
1 项目测试截图 及仓库地址 https://gitee.com/magicfatblink/Notes-master 2 小米便签代码的移植 2.1 IDE 的准备 2.1.1 AS版本选择 由于小 ...
- 【论文阅读】IROS2017: Voxblox & RAL2019: Voxblox++
IROS2017: Voxblox & RAL2019: Voxblox++ Status: Finished Type: RAL Year: 2019 组织/Sensor: ETH-ASL ...
- vulnhub - BREACH: 1
vulnhub - BREACH: 1 描述 作为多部分系列中的第一部分,Breach 1.0 旨在成为初学者到中级的 boot2root/CTF 挑战.解决将需要可靠的信息收集和持久性相结合.不遗余 ...
- Java权限认证框架比较
认证.授权.鉴权和权限控制 定义 英文 实现方式 认证 确认声明者的身份 identification 根据声明者独特的识别信息 授权 获取用户的委派权限 authorization 颁发一个授信媒介 ...
- Java List对象分组
实体类 必须重写equals和hashCode方法 package com.zcsoft.rc.backend.biz.vo.securityLibary; import java.util.Date ...
- C#事件总结
前言:C#的事件也是一项非常关键的技术,必须要深刻的理解,本质上是基于委托的: 事件模型的五个组成部分: 1.事件的拥有者-- event source,对象: 2.事件的成员--event,成员: ...
- 全网最适合入门的面向对象编程教程：05 类和对象的Python实现-PyCharm代码标签（一个帮你提升coding效率的小技巧）
摘要: 本文介绍了PyCharm IDE中代码标签的定义.类型和使用方法. 往期推荐: 学嵌入式的你,还不会面向对象??! 全网最适合入门的面向对象编程教程:00 面向对象设计方法导论 全网最适合入门 ...
- 转载 | ofd转pdf最好用的软件，ofd文件如何转化成pdf?
1.背景 需要将ofd转换为pdf 2.使用方法 使用taurusxin 开发的软件Ofd2Pdf.exe即可实现,软件版权归原作者所有.这里表示感谢! 3.下载地址 官网:https://githu ...
- [oeasy]python0124_Code_page_437_IBM_5150_点阵式字形码_显示器效果
字符显示器 回忆上次内容 简体和繁体的汉字 字符数量都超级大 感谢王选和陈堃銶等前辈发明了激光照排技术 中文排版从此使用上了gb2312编码 添加图片注释,不超过 140 字(可选) ...
- oeasy 教您玩转 linux 010215 随机谚语 fortune
我们来回顾一下 上一部分我们都讲了什么? 把图像转化为了ascii️字符画 并且修改了cowsay的图像素材的位置 我们想要让牛讲一个随机的笑话 首先我们要有个说笑话的软件包 # 下载fortune ...