BOM

  • A+
所属分类:Web前端
摘要

BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。


BOM

BOM的概念

BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。

我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理,

比如:刷新浏览器、后退、前进、在浏览器中输入URL等

BOM的顶级对象window

window是浏览器的顶级对象,当调用window下的属性和方法时,可以省略window 注意:window下一个特殊的属性 window.name

之前用的 docuement完整写法:

window.document.getElementById("xx");
window.alert(); --> alert();

全局变量函数和隐式变量

我们定义的全局变量,函数,隐式变量其实默认都是window的属性和方法。

    <script>
       // 全局变量
       var x = 100; // -- > window.x = 100
       // 全局的函数
       function fu(){  // window.fu = function(){...}
           console.log(11);
           // 隐式变量 (不使用var申明)
           stuName = "旗木卡卡西";  // window.stuName="xxxxx"
           // 局部变量,根window没有关系
           var st = "abc";
           console.log("window.st="+window.st)// undefined
      }
       // 调用的时候
       fu();// --> window.fu();
       console.log(window);
       if(1==1){
           var score = 100;
      }
       console.log("score="+score);// 100
       var y = 100;// window.y = 100;
       var y = 10000;// window.y = 10000;
       console.log(y);
   </script>

对话框

  • alert() : 不太友好的提示

  • prompt() : 可输入的提示框

  • confirm() : 有确定和取消按钮的确认框

案例:

    <h2>window的弹窗</h2>
   <input type="button" value="alert" id="alertBtn">
   <input type="button" value="prompt" id="promptBtn">
   <input type="button" value="confirm" id="confirmBtn">
   <script>
       document.getElementById("alertBtn").onclick=function(){
           window.alert("就是一个提示,你只能点击确定按钮");
      }
       document.getElementById("promptBtn").onclick=function(){
           // 两个参数:
           // 第一个参数:弹窗框的标题
           // 第二个参数: 弹出框中的输入框的默认值
           var result = window.prompt("请输入你的年龄",18);
           // result : 确定按钮,得到输入框的值。 取消:null
           console.log(result);
      }
       document.getElementById("confirmBtn").onclick=function(){
           var result =confirm("今天你是加班还是回家");
           // result: 确定true, 取消false
           if(result){
               alert("你是一个好员工!老板明年换大奔!");
          }else{
               alert("你是一个好老公!明年带上好帽子!");
          }
      }
       // window.open("http://www.baidu.com")
       function removeFriend(){
           if(confirm("您确定要删除好友[法外狂徒-张三]吗?")){
               // 开始删除
               document.querySelector("li").remove();
          }
      }
   </script>
   <ul>  
       <!-- 使用超链接调用javascript函数-->
       <li>张三 <a href="javascript:removeFriend()">删除</a></li>
   </ul>

页面加载事件

  • onload

window.onload = function () {
 // 当页面加载完成执行
 // 当页面完全加载所有内容(包括图像、脚本文件、CSS 文件等)执行
}
  • onunload

window.onunload = function () {
 // 当用户退出页面时执行
}

window的其他属性

Window.innerHeight 获得浏览器窗口的内容区域的高度,包含水平滚动条(如果有的话)。 Window.innerWidth 获得浏览器窗口的内容区域的宽度,包含垂直滚动条(如果有的话)。

Window.outerHeight 返回浏览器窗口的外部高度。 Window.outerWidth 返回浏览器窗口的外部宽度。 Window.pageXOffset window.scrollX的别名。 Window.pageYOffset window.scrollY的别名。 Window.parent 返回当前窗口或子窗口的父窗口的引用。

案例:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      *{
           padding: 0px;
           margin: 0px;
           border: 0px;
      }
   </style>
</head>
<body>
   <script>
       // 全局变量
       var x = 100; // -- > window.x = 100
       // 全局的函数
       function fu(){  // window.fu = function(){...}
           console.log(11);
           // 隐式变量 (不使用var申明)
           stuName = "旗木卡卡西";  // window.stuName="xxxxx"
           // 局部变量,根window没有关系
           var st = "abc";
           console.log("window.st="+window.st)// undefined
      }
       // 调用的时候
       fu();// --> window.fu();
       console.log(window);
       if(1==1){
           var score = 100;
      }
       console.log("score="+score);// 100
       var y = 100;// window.y = 100;
       var y = 10000;// window.y = 10000;
       console.log(y);
   </script>
   <hr>
   <h2>window的弹窗</h2>
   <input type="button" value="alert" id="alertBtn">
   <input type="button" value="prompt" id="promptBtn">
   <input type="button" value="confirm" id="confirmBtn">
   <script>
       document.getElementById("alertBtn").onclick=function(){
           window.alert("就是一个提示,你只能点击确定按钮");
      }
       document.getElementById("promptBtn").onclick=function(){
           // 两个参数:
           // 第一个参数:弹窗框的标题
           // 第二个参数: 弹出框中的输入框的默认值
           var result = window.prompt("请输入你的年龄",18);
           // result : 确定按钮,得到输入框的值。 取消:null
           console.log(result);
      }
       document.getElementById("confirmBtn").onclick=function(){
           var result =confirm("今天你是加班还是回家");
           // result: 确定true, 取消false
           if(result){
               alert("你是一个好员工!老板明年换大奔!");
          }else{
               alert("你是一个好老公!明年带上好帽子!");
          }
      }
       // window.open("http://www.baidu.com")
       function removeFriend(){
           if(confirm("您确定要删除好友[法外狂徒-张三]吗?")){
               // 开始删除
               document.querySelector("li").remove();
          }
      }
   </script>
   <ul>  
       <!-- 使用超链接调用javascript函数-->
       <li>张三 <a href="javascript:removeFriend()">删除</a></li>
   </ul>
   <div id="box" style="border: 1px solid; width: 500px; height: 200px;">
       <ul>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
       </ul>
   </div>
   <script>
       // 这些属性在不同的浏览器中表现是不一样的。
       // 比如滚动条
       var x = window.pageXOffset ? window.pageXOffset : window.scrollX;
       var y = window.pageYOffset ? window.pageYOffset : window.scrollY;
       // 获取所有的li
       var lis = document.querySelectorAll("#box ul li");
       lis[0].innerText="Window.innerHeight:"+window.innerHeight;
       lis[1].innerText="Window.innerWidth:"+window.innerWidth;
       lis[2].innerText="Window.outerHeight:"+window.outerHeight;
       lis[3].innerText="Window.outerWidth:"+window.outerWidth;
       lis[4].innerText="Window.pageXOffset:"+x;
       lis[5].innerText="Window.pageYOffset:"+y;
   </script>
   <script>
       function stFn(){
           alert("外部窗体的函数");
      }
   </script>
   <div style="width: 500px; height: 500px;">
       <iframe src="inner.html" frameborder="1" style="border: 1px solid;"></iframe>
   </div>
</body>
</html>

内嵌的网页:

    <h2>内部的HTML</h2>
   <p>
       <a href="javascript:window.parent.stFn()">调用外部窗体的函数</a>
   </p>

定时器

setTimeout()和clearTimeout()

  • setTimeout()在指定的毫秒数到达之后执行指定的函数,只执行一次

案例1: 等待两秒,将DIV缩小

    <div id="result" style="border: 1px solid; width: 200px; height: 200px;"></div>
   <script>
       // 参数1 要执行的程序,
       // 参数2 要等待的时间,单位是毫秒
       window.setTimeout(function(){
           var divDom = document.getElementById("result");
           divDom.style.width="50px";
           divDom.style.height="50px";
      },2000);
   </script>

案例2: 提示框等待两秒消失

    <p>         <input type="button" value="提示" id="tipBtn">     </p>     <div id="msgBox" style="display: none; width: 300px; border: 1px solid #ccc; border-radius: 3px;  position: absolute;"></div>     <script>         document.getElementById("tipBtn").onclick=function(){             var divDom = document.getElementById("msgBox");             //定位             divDom.style.top = (window.innerHeight / 2 - 30) +"px";             divDom.style.left = (window.innerWidth / 2 - 150) +"px";             divDom.style.display = "block";             divDom.style.backgroundColor="#f0f0f0";             divDom.style.textAlign="center";             divDom.innerText = "这时一个消息的提示";             // 定义一个定时器,等待两秒消失             // 错误的写法             //setTimeout(remMsgBox(),2000);             // 正确的调用函数的两种写法  : 函数只有名字,没有()             //setTimeout(remMsgBox,2000);             setTimeout("remMsgBox()",2000);// 函数的调用是使用引号包裹的         }         // 专门定义一个函数,用来取消提示框         function remMsgBox(){             document.getElementById("msgBox").style.display="none";         }     </script> 

案例3:实现一个倒计时的计时器

tips: 在函数内部通过setTimeout调用自己

    请输入时间: <input type="text" id="time"> <input type="button" value="开始" id="startBtn">     <script>         document.getElementById("startBtn").onclick=function(){             // 执行倒计时的函数             ctime();         }         // 准备一个倒计时的函数         function ctime(){             // 获取dom             var timeDom = document.getElementById("time");             // 处理倒计时的数据             timeDom.value = timeDom.value-1;             if(timeDom.value > 0){                 // 等待1秒钟,再次执行倒计时的函数(在内部调用它自己--递归)                 setTimeout(ctime,1000);             }         }     </script> 
  • clearTimeout() 让一个计时器停止。

// 当我们开启一个定时器的时候,这个定时器会产生一个实例(句柄) var timeInstance = setTimtout("xxx",2000); //  停止定时器 window.clearTimeout(timeInstance);

setInterval()和clearInterval()

  • setInterval() 定时调用的函数,可以按照给定的时间(单位毫秒)周期调用函数

  • clearInterval() 终止interaval执行。

案例1: 电子钟表

    <h2>电子钟表</h2>     <span id="biao" style="height: 30px; line-height: 30px; border: 1px solid; display: inline-block; margin: 5px 5px;"></span>     <script>         function showTime(){             var dateObj = new Date();             var str = dateObj.getFullYear()+"年"+(dateObj.getMonth()+1)+"月"+dateObj.getDate()+"日 "+                 dateObj.getHours()+":"+dateObj.getMinutes()+":"+dateObj.getSeconds();             document.getElementById("biao").innerText = str;         }         // 准备一个实例对象,用来保存setInterval句柄         var intervalInstance = undefined         // 使用setIntervale周期性调用         intervalInstance = setInterval("showTime()",1000);         // 鼠标悬浮就暂停这个时钟         document.getElementById("biao").onmouseover=function(){             clearInterval(intervalInstance);         }         document.getElementById("biao").onmouseout=function(){             // 使用setIntervale周期性调用             intervalInstance = setInterval("showTime()",1000);         }     </script> 

练习案例1:无缝滚动

思路:

将要滚动的内容复制一份放在之前的内容的后面(看方向)。使用JS匀速的移动外面这个盒子的滚动条。当被隐藏的元素完全显示的时候,立刻将滚动条回到初始状态。

    <div>         <hr>     </div>     <div id="scrollBox" style="overflow: hidden; border:1px solid; padding:0px; width:300px; height:170px">         <ul>             <li>这里是一个新闻的标题-1111</li>             <li>这里是一个新闻的标题-2222</li>             <li>这里是一个新闻的标题-3333</li>             <li>这里是一个新闻的标题-4444</li>             <li>这里是一个新闻的标题-5555</li>             <li>这里是一个新闻的标题-6666</li>             <li>这里是一个新闻的标题-7777</li>             <li>这里是一个新闻的标题-8888</li>         </ul>     </div>     <script>         // 初始化无缝滚动         function initScroll(){             var boxDom = document.getElementById("scrollBox");             var ulDom = boxDom.firstElementChild;             var ulDom1 = ulDom.cloneNode();             ulDom1.innerHTML = ulDom.innerHTML;             boxDom.append(ulDom1);         }         // 调用初始化函数         initScroll();         // 滚动的内容         // 准备一个实例,用来保存计时器对象         var timeInstance = undefined;         var step = 3;         function doScroll(){             // 获取box的dom对象             var boxDom = document.getElementById("scrollBox");             // 取出scrollTop             var top = boxDom.scrollTop;             console.log(top);             boxDom.scrollTop = top + step;             if(top >= 166){                 boxDom.scrollTop = 0;             }             //  使用setTimeout调用自己             timeInstance = setTimeout("doScroll()",50);         }         doScroll();         // 鼠标悬浮的时候停止滚动         document.getElementById("scrollBox").onmouseover=function(){             clearTimeout(timeInstance);         }         // 鼠标离开的时候继续滚动         document.getElementById("scrollBox").onmouseout=function(){             doScroll();         }     </script> 

location对象

location对象是window对象下的一个属性,使用的时候可以省略window对象

location可以获取或者设置浏览器地址栏的URL

案例:

    <script>         // 获取当前地址栏的信息         var url = location.href;         console.log(url);     </script>     <input type="button" id="btn" value="起点">     <script>         document.getElementById("btn").onclick=function(){             // 类似于超链接             location.href="http://7dian.com";         }     </script> 

location有哪些成员?

  • 使用chrome的控制台查看

  • 查MDN

  • 成员

    • assign()/reload()/replace()

    • hash/host/hostname/search/href……

URL

统一资源定位符 (Uniform Resource Locator, URL)

  • URL的组成

scheme://host:port/path?query#fragment http://www.7dianit.com:80/a/b/index.html?name=zs&age=18#bottom scheme:通信协议 	常用的http,ftp,maito等 host:主机 	服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。 port:端口号 	整数,可选,省略时使用方案的默认端口,如http的默认端口为80。 path:路径 	由零或多个'/'符号隔开的字符串,一般用来表示主机上的一个目录或文件地址。 query:查询 	可选,用于给动态网页传递参数,可有多个参数,用'&'符号隔开,每个参数的名和值用'='符号隔开。例如:name=zs fragment:信息片断 	字符串,锚点. 

history对象

  • back()

  • forward()

  • go()

navigator对象

  • userAgent

特效

偏移量

  • offsetParent用于获取定位的父级元素

  • offsetParent和parentNode的区别

var box = document.getElementById('box'); console.log(box.offsetParent); console.log(box.offsetLeft); console.log(box.offsetTop); console.log(box.offsetWidth); console.log(box.offsetHeight);

客户区大小

var box = document.getElementById('box'); console.log(box.clientLeft); console.log(box.clientTop); console.log(box.clientWidth); console.log(box.clientHeight);

滚动偏移

var box = document.getElementById('box'); console.log(box.scrollLeft) console.log(box.scrollTop) console.log(box.scrollWidth) console.log(box.scrollHeight)
  • 版权声明:本站原创文章,于2022年1月27日09:17:32,由 发表,共 10351 字。
  • 转载请注明:BOM - 张拓的天空