BOM 相关知识总结

Posted gsq1998

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 相关知识总结的主要内容,如果未能解决你的问题,请参考以下文章

js中BOM与DOM的相关知识基础

线程学习知识点总结

7.25PHP所学知识总结

JavaScript知识点总结

JS之BOM对象常用知识点整理

BOM与DOM