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 ...
随机推荐
- svn服务端安装和使用
首先去官网下载安装包 点我下载 下载完了以后选择安装路径然后一直next就可以了 安装完了以后在开始菜单里面找到svn 打开 如何使用? 这里是创建代码管理的存储库 点击 repositories ...
- UniRx-unirx中的对象池
UniRx-unirx中的对象池 对象池Unirxunity 对象池 一.对象池模式 <游戏设计模式-对象池模式> 1.概念 定义一个池对象,其包含了一组可重用对象. 其中每个可重用对象都 ...
- C# 8字节byte数组转int
对方是协议 对于整型.长整型等数据类型,Big endian 认为第一个字节是最高位字节(按照从低地址到高地址的顺序存放数据的高位字节到低位字节):而 Little endian 则相反,它认为第一个 ...
- Linux内核的5个子系统
--- title: Linux内核的5个子系统 EntryName: subsystems_in_linux_kernel date: 2020-10-10 03:07:07 categories: ...
- 基于 UDP 的 组播、广播详解
背景 有些时候我们在网络通信中也需要用到 组播(多播).广播.现在我们来介绍如何实现. 建议:在此之前,关闭防火墙. ubuntu: service ufw stop windows: 控制面板关闭 ...
- 【基础推导】MPC控制器及其车辆模型详细推导 （附代码链接及详细推导说明）
0. 参考与前言 Python 代码:github AtsushiSakai/PythonRobotics C++ 代码:github jchengai/gpir/mpc_controller 相关参 ...
- 3568F-Linux-RT系统测试手册
- FPGA bit转bin文件
首先科普一下 什么是bitstream文件 FPGA比特流(bitstream)是一种用于配置可编程逻辑器件的数据格式,特别是现场可编程门阵列(FPGA).比特流包含了硬件逻辑电路.路由信息以及芯片上 ...
- 基于表单登录的cookies登录
1.基于表单登录的cookies登录 In [ ]: import requests import matplotlib.pyplot as plt from http.cookiejar impor ...
- 2024秋招西山居游戏开发SEED种子实习笔试题
西山居游戏开发SEED种子实习 2024年秋招笔试题目,仅供参考,请大佬多多指教 选择题 逆波兰数,TCP,操作系统FIFO,C语言大小端 填空题 一道LUA脚本写结果,一道并发存储优化题,计算机系统 ...