JavaScript的BOM相关内容

时间:2020-07-23 16:45:00 来源:互联网 热度: 作者: 佚名 字体:

BOM(浏览器对象模型)

BOM(浏览器对象模型)简介

BOM是Browser Object Model的简写,即是浏览器对象模型。

BOM由一系列对象组成,是访问、控制、修改客户端浏览器的属性的方法。其中代表浏览器窗口的window对象是BOM的顶层对象,其他对象都是该对象的子对象。

BOM没有统一的标准(每种客户端都可以自定标准)

  • JavaScript语法的标准化组织是ECMA

  • DOM的标准化组织是W3C

  • BOM没有缺乏标准,BOM最初是Netscape浏览器标准的一部分

 

window对象

window,中文是“窗口”的意思。window对象代表一个浏览器或一个框架。window对象会在<body><frameset>每次出现时被自动创建。

JavaScript中任何一个全局函数或变量都是window的属性

window对象除了是BOM中所有对象的父对象外,还包含一些常用属性、方法。

window.方法和window.属性就可以访问了。

存在兼容性的属性、方法:状态栏属性status

过时的属性、方法:打开新窗口的open()、框架集合对象frames[]、与窗口操作有关的属性、方法:name、pageXOffset、pageYOffset、moveTo()、moveBy()等

常用的属性和方法:

alert():显示带有一段信息和一个确认按钮的警告框

window.alert("qqq");

alert("111"); //不加window也可以调用

confirm():显示带有一段信息以及确认按钮和取消按钮的对话框

if(confirm("您是否要关闭窗口?")){

console.log("是");

}else{

console.log("否");

}

close():关闭浏览器窗口

print():打印当前窗口的内容

scrollBy():按照指定的像素值来滚动内容

scrollTo():把内容滚动到指定的坐标

clearInterval():取消由setInterval()设置的timeout

clearTimeout():取消由setTimeout()设置的timeout

setInterval():按照指定的周期(以毫秒计算)来调用函数或计算表达式

setTimeout():在指定的毫秒数后调用函数或计算表达式

 

 setInterval()与setTimeout()的相同与不同:

相同:语法一样,都是一个周期执行一个函数

不同:setTimeout()只会执行一次,setInterval()按照周期去循环执行

setTimeout()与setInterval() 相比,编码要少一些,但做复杂控制时, setTimeout() 的返回值没有及时清除会经常造成不可预料的意外。在使用setTimeout()或setInterval() 的时候,一定要注意的他们的返回值的问题,否则会出现各种异常。

 

location对象

location对象是属于window对象的子对象

location对象是由JavaScript runtime engine自动创建的,包含有关当前url信息

常用属性:

hash:设置或返回从#号开始的url

host:设置或返回主机或当前的url的端口号

hostname:设置或返回当前的URL主机名

href:设置或返回完整的URL

pastname:设置或返回当前URL的路径部分

port:设置或返回当前URL的端口号

protocol:设置或返回当前URL的协议

search:设置或返回从问号(?)开始的URL(查询部分)

常用方法:

assign():加载新的文档

reload():重新加载当前文档

replace():用新的文档替代当前文档

 

利用自己的服务器测试了一下,就是有点不太好

 

 

 

history对象

history对象是属于window对象的子对象

后退、前进

history对象是由JavaScript runtime engine自动创建的,由一系列的url组成。这些url是用户在一个浏览器窗口内已访问的url

方法:

back():加载history列表中的上(前)一个URL

forward():加载history列表中的下一个URL

go():加载history列表中的某一个具体页面

navigator对象

判断浏览器版本、浏览器兼容性(版本问题)

navigator对象是由JavaScript runtime engine自动创建的,包含有关客户机浏览器的信息。

常用属性:

appCodeName:返回浏览器的代码号

appName:返回浏览器的名称

appVersion:返回浏览器的平台和版本信息

cookieEnabled:返回指明浏览器中是否启用cookie的布尔值

platform:返回运行浏览器的操作系统平台

userAgent:返回由客户机发送服务器的user-agent头部的值

回话机制:所有的网页都能访问到回话里面的数据

screen对象

screen 对象是属于Window对象的子对象。

screen对象是由 JavaScript runtime engine 自动创建的,含有关客户机显示屏幕的信息。

常用属性:

availHeight:返回显示屏幕的高度(除window任务栏之外)

availWidth:返回显示屏幕的宽度(除window任务栏之外)

bufferDepth:设置或返回在off-screen bitmap buffer中调色板的比特深度

colorDepth:返回目标设备或缓冲器上的调色板的比特深度

deviceXDPI:返回显示屏幕的每英寸水平点数

deviceYDPI:返回显示屏幕的每英寸垂直点数

fontSmoothingEnabled:返回用户是否在显示控制面板中启用了字体平滑

height:返回显示屏幕的高度

width:返回显示屏幕的宽度

logicalXDPI:返回显示屏幕每英寸的水平方向的常规点数

logicalYDPI:返回显示屏幕每英寸的垂直方向的常规点数

pixelDepth:返回显示屏幕的颜色分辨率(比特每像素)

updateInterval:设置或返回屏幕的刷新率

document对象

document对象是window对象的子对象。

document对象的独特之处是它是唯一一个既属于BOM 又属于DOM的对象。

从BOM角度看,document对象由一系列集合构成,这些集合可以访问文档的各个部分,并提供页面自身的信息。再有,由于BOM没有可以指导实现的标准,所以每个浏览器实现的document对象都稍有不同,这一节的重点是最常用的功能。

常用属性:

cookie:设置或返回与当前文档有关的所有cookie

domain:返回当前文档的域名

referrer:返回载入当前文档的文档的URL

title:返回当前文档的标题

URL:返回当前文档的URL

常用方法:

getElementById():返回对拥有指定 id 的第一对象的引用

getElementsByName():返回对拥有指定 名称 的对象集合

getElementsByTagName():返回对拥有指定 标签名称 的对象集合

write():向文档写HTML表达式或JavaScript代码

writeIn():等同于write()方法,不同的是每个表达式之后加一个换行符

 

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BOM的使用</title>
    <style>
        .box{
            border: 1px solid #e2e2e2;
            float: left;
            width: 150px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
            margin-left: 80px;
        }
        #scoll{
            width: 80px;
            height: 200vh;
            background-color: palevioletred;
            font-size: 20px;
        }
        #flexd{
            position: fixed;
            bottom: 50px;
            right: 50px;
            background-color: purple;
            width: 80px;
            height: 80px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="box">打开窗口</div>
    <div class="box">关闭窗口</div>
    <div class="box">计时</div>
    <div class="box">关闭计数器</div>
    <div id="scoll">
        山有木兮木有枝,心悦君兮君不知。
    </div>
    <div id="flexd"></div>
    <hr>
    <div class="box">返回上一层</div>
    <div class="box">前进</div>
    <div class="box">前进到第三个</div>
    
    <script>
        let open = document.getElementsByClassName("box"),
            tscoll = document.getElementById("flexd"),
            newwindow = null,
            timer = null;
        open[0].onclick = function (){
            newwindow = window.open("two.html","scrollbars=yes, width=400, height=200");
            newwindow.focus(); //focus的作用是使新窗口保持在最前面
        }
        open[1].onclick = function (){
            newwindow.close();
        }
        tscoll.onclick = function (){
            // window.scrollTo(0,0);  //返回到顶部,x轴,y轴
            window.scrollBy(100,100);   //按照指定的像素值来滚动内容
        }
        let i = 0;
        // open[2].onclick = function(){
        //     timer = window.setInterval(function (){
        //         open[2].innerHTML = "计时:" + i;
        //         i++;
        //     },1000)
        // }
        // open[3].onclick = function(){
        //     window.clearInterval(timer);
        // }
        open[2].onmousemove = function(){
            timer = window.setTimeout(function (){
                open[2].innerHTML = i;
                console.log("11");
                i++;
            },1000)
        }
        
        open[3].onclick = function(){
            window.clearTimeout(timer);
        }

        document.write('<p>返回从井号 (#) 开始的 URL(锚):'+window.location.hash+'</p>');
        document.write('<p>返回主机名和当前 URL 的端口号:'+window.location.host+'</p>');
        document.write('<p>返回当前 URL 的主机名:'+window.location.hostname+'</p>');
        document.write('<p>返回完整的 URL:'+window.location.href+'</p>');
        document.write('<p>返回当前 URL 的路径部分:'+window.location.pathname+'</p>');
        document.write('<p>返回当前 URL 的端口号:'+window.location.port+'</p>');
        document.write('<p>返回当前 URL 的协议:'+window.location.protocol+'</p>');
        document.write('<p>返回从问号 (?) 开始的 URL(查询部分):'+window.location.search+'</p>');
        document.write('<hr>');


        open[4].onclick = function(){
            window.history.back();
        }
        open[5].onclick = function(){
            window.history.forward();
        }
        open[6].onclick = function(){
            window.history.go(3);
        }
        document.write('浏览器的代码名:' + window.navigator.appCodeName + '<br/>');
        document.write('浏览器的名称:' + window.navigator.appName + '<br/>');
        document.write('浏览器的平台和版本信息:' + window.navigator.appVersion + '<br/>');
        document.write('浏览器中是否启用了cookie:' + window.navigator.cookieEnabled + '<br/>');
        document.write('运行浏览器的操作系统:' + window.navigator.platform + '<br/>');
        document.write('user-agent头部信息:' + window.navigator.userAgent + '<br/>');
        document.write('<hr>');

        document.write('<p>屏幕的高度 (除 Windows 任务栏之外):'+window.screen.availHeight+'</p>');
        document.write('<p>屏幕的宽度 (除 Windows 任务栏之外):'+window.screen.availWidth+'</p>');
        document.write('<p>调色板的比特深度:'+window.screen.colorDepth+'</p>');
        document.write('<p>屏幕的高度:'+window.screen.height+'</p>');
        document.write('<p>屏幕的宽度:'+window.screen.width+'</p>');
        document.write('<hr>');

        document.write('<p>当前文档有关的所有 cookie:' + document.cookie +'</p>');
        document.write('<p>当前文档的域名:' + document.domain +'</p>');
        document.write('<p>载入当前文档的文档的 URL:' + document.referrer +'</p>');
        document.write('<p>当前文档的标题:' + document.title +'</p>');
        document.write('<p>当前文档的 URL:' + document.URL +'</p>');

    </script>
</body>
</html>

 

效果: 

 

 

 

 

document对象