BOM操作

2020-11-12 本文已影响0人 consolelog

BOM（Browser Object Model 浏览器对象模型），BOM提供了了很多的对象，用于访问浏览器的功能。这些功能都是由浏览器厂商所提供的，没有一个统一的标准，每个浏览器的BOM操作可能有一定的差异。BOM的很多操作权限都很高（例如关闭浏览器窗口），可能某一些浏览器提供商会禁止使用这些功能，因此我们在实际开发中应该尽量减少BOM操作。

body位置属性

client系列

元素.clientWidth 元素的可视宽（width + 左右padding）
元素.clientHeight 元素的可视高（height + 上下padding）
元素.clientTop 上边框的高度（border-top-width）
元素.clientLeft 左边框的高度（border-left-width）

offset系列

元素.offsetWidth (width+padding+border)
元素.offsetHeight (height+padding+border)
元素.offsetTop 元素顶部到定位父元素的距离(没有定位父元素，则到body)
元素.offsetLeft 元素左边到定位父元素的距离(没有定位父元素，则到body)

scroll系列

元素.scrollTop 被卷去的高
元素.scrollLeft 被卷去的宽
元素.scrollWidth 元素实际内容宽
元素.scrollHeight 元素实际内容高

window对象

所有的浏览器都支持window对象。在浏览器中，window对象有着双重的角色，他既是JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的一个GLobal对象。

window.alert("我是一个警告框");//弹出一个警告框
window.confirm("是否重置");//返回一个Boolean值
window.prompt("提示信息", 默认值);//以字符串返回用户输入的值
open()//打开一个窗口
close()//关闭窗口,如果没有参数默认关闭当前窗口

location对象

location是最有用的BOM对象之一，它提供了当前窗口加载的文档有关的信息，还提供了一些导航功能。location既是window对象的属性，也是document对象的属性。

hash "#contents" 返回URL中的hash（#号后跟零或多个字符），如果URL中不包
含散列，则返回空字符串
host "www.wrox.com:8080" 返回服务器名称和端口号（如果有）
hostname "www.wrox.com" 返回不带端口号的服务器名称
href "http:/www.wrox.com" 返回当前加载页面的完整URL。而location对象的toString()方法也返回这个值
pathname "/WileyCDA/" 返回URL中的目录和（或）文件名
port "8080" 返回URL中指定的端口号。如果URL中不包含端口号，则这个属性返回空字符串
protocol "http:" 返回页面使用的协议。通常是http:或https:search "?q=javascript"返回URL的查询字符串。这个字符串以问号开头
console.log(location.search); // 返回URL的查询字符串。这个字符串以问号开头

history对象

history对象保存了用户的上网记录

history: 历史记录
console.log(window.history);
go(): 跳转页面
back(): 返回
forward(): 前进

navigator对象

navigator对象的属性用于检测网页的浏览器类型

<script type="text/javascript">
    console.log(window.navigator);;
    window.onload = function() {
        var txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
        txt += "<p>浏览器名称: " + navigator.appName + "</p>";
        txt += "<p>浏览器版本: " + navigator.appVersion + "</p>";
        txt += "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
        txt += "<p>硬件平台: " + navigator.platform + "</p>";
        txt += "<p>用户代理: " + navigator.userAgent + "</p>";
        txt += "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
        document.write(txt);
    }
</script>