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>
