JS学习篇（五）——BOM

就是干！！

于 2021-02-03 22:44:24 发布

阅读量142

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/weixin_43332220/article/details/113621288

版权

JS 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

所谓BOM 就是浏览器对象模型

BOM能够有能力使JavaScript有能力和浏览器对话其中有几个非常重要的对象：
window：是浏览器的一个实例，在浏览器中扮演双重角色，即是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的global全局对象
下面是window的子对象：
location：用于获取当前页面的URL，并且将浏览器重定向到新的页面上去
history：包含了浏览器上的地址
screen： 包含了用户有关屏幕的信息
Navigation ：包含有关访问者浏览器的信息

一：window对象

1：三种弹窗
在这里插入图片描述
alert一般用作警示框，而alert用作是确认框。这里示范一下confirm的用法

<body>
  <button id="btn">111</button>
</body>
<script>
    //confirm用于返回带有特定消息以及确认和取消按钮的警示框
    var bt=document.getElementById("btn");
    bt.onclick=function(){
       var retu=confirm("这是一个confirm");
       if(retu===true){
           console.log("点了确定");
       }else{
           console.log("点了取消");
       }
    }
</script>

在这里插入图片描述

<body>
  <button id="btn">111</button>
   <p id="tex">1</p>
</body>
<script>
    var bt=document.getElementById("btn");
    bt.onclick=function(){
       var retu=prompt("请输入你的名字","zhanghao");
      if(retu!==null||retu!==""){
          var a="我的名字是"+retu;
          document.getElementById("tex").innerHTML=a;
      }
    }
</script>

2:window 尺寸
Window 尺寸

浏览器窗口的尺寸（浏览器的窗口，不包括工具栏和滚动条）。对于InternetExplorer、Chrome、Firefox、Opera 以及 Safari：（不包括border和滚动条的宽度以及高度）
window.innerHeight -浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5： document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth

Element.offsetHeight属性返回元素的垂直高度，Element.offsetWidth属性返回水平宽度。
包括border和滚动条的宽度以及高度

显示网页的总高度和总宽度，包括因为滚动条显示隐藏的一部分
document.documentElement.scrollHeight
document.documentElement.scrollwidth
默认情况下，它们包括Padding，但不包括Border和Margin。如果内容正好适合它的容器，没有溢出，那么Element.scrollHeight和Element.clientHeight是相等的，scrollWidth属性与clientWidth属性是相等的

Element.clientTop属性等于网页元素顶部边框的宽度，单位为像素。
Element.scrollTop属性表示网页元素的垂直滚动条向下滚动的高度。
Element.offsetTop返回垂直位移，单位为像素，相对于父节点的位移

3:window 方法
在这里插入图片描述

moveTo() 方法可把窗口的左上角移动到一个指定的坐标。

window.moveTo(x,y)

方法用于把窗口大小调整为指定的宽度和高度。

window.resizeTo(width,height)

4：超时调用和间歇调用
（需要注意的是这里设置的事件不是从浏览器加载完成之后开始及时的，而要等执行栈中的任务完成之后，才会将task队列中拿出异步任务进行执行。）
超时调用：
在这里插入图片描述

间歇调用

我们知道settimeout只执行一次，而setinterval是在规定的事件段内执行，那么要怎样用settimeout实现setinterval呢？
比如这样一个例子,定义一个初始值为10的数字，让他开始自加，如果加到10清除定时器
先来示范一下setinterval版本

 var num=0;
    var max=10;
     function setint(){
         console.log(num++);
         if(num===max){
             clearInterval(clears);
             console.log("完成")
         }
     }
    var clears=setInterval(setint,500);

紧接着，接下来settimeout版本

var num=0;
    var max=10;
     function setint(){
         console.log(num++);
         if(num<max){
             setTimeout(setint,500);
         }else{
             console.log("完成")
         }
     }
    setTimeout(setint,500);

二：location对象

window.location用于获取当前页面的地址，并且将浏览器重定向到新的页面
Location 对象属性

属性	描述
hash	返回一个URL#以及#后面的部分
host	返回一个URL的主机名和端口
hostname	返回URL的主机名
href	返回完整的URL
pathname	返回的URL路径名。
port	返回一个URL服务器使用的端口号
protocol	返回一个URL协议
search	返回一个URL的查询部分

Location 对象方法

方法	说明
assign(URL)	载入一个新的页面
reload()	刷新当前页面，接收一个Boolean值为参数，参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档
replace(URL)	用新的页面替换当前页面

这里注意assign和replace，都是接收一个URL为参数，都可以加载新的页面，不过，用assign可以使用后退回到最初的页面，而replace是替换，无法通过浏览器导航部分的后退按钮回到原来的页面

三：history对象

history包含了浏览器的历史
在这里插入图片描述

四：screen对象

window.screen 对象包含有关用户屏幕的信息。
在这里插入图片描述

此处注意与window.innerWidth以及window.innerHeight的区别，这两个是用来访问窗口的宽度以及高度。会随窗口大小的而改变（不包括border和滚动条的宽度以及高度）
而screen.availWidth以及screen.availHeight则表示的是屏幕的可用区域宽度以及高度，以像素计，减去界面特性，比如窗口任务栏。

五：Navigation对象

包含了有关浏览器的信息
Navigator 对象属性

属性	说明
appCodeName	返回浏览器的代码名
appName	返回浏览器的名称
appVersion	返回浏览器的平台和版本信息
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值
platform	返回运行浏览器的操作系统平台
userAgent	声明了浏览器用于 HTTP 请求的用户代理头的值。并且所有的浏览器都支持这个属性

就是干！！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS学习篇（五）——BOM

所谓BOM 就是浏览器对象模型BOM能够有能力使JavaScript有能力和浏览器对话其中有几个非常重要的对象：window：是浏览器的一个实例，在浏览器中扮演双重角色，即是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的global全局对象下面是window的子对象：location：用于获取当前页面的URL，并且将浏览器重定向到新的页面上去history：包含了浏览器上的地址screen：包含了用户有关屏幕的信息Navigation ：包含有关访问者浏
复制链接

扫一扫

专栏目录