JavaScript BOM学习

王宇阳 2019-11-13 我要评论

Mirror王宇阳

2019年11月13日 [首发]

数日没有更新博文了，觉得不好意思了！这不是，整理了一下JavaScript的一下BOM笔记资料，今天贡献出来！(HTML DOM也会随后整理发表)

笔者在接触Js之前就听闻Js的“牛逼”，接触后发现只要想法够贼，Js就能给你的贼想法复现 ~

作者主页：https://www.cnblogs.com/wangyuyang1016/

BOM简单的说就是浏览器对象模型，对BOM的操作就是对浏览器的功能和属性的操作；

BOM的核心是window,它是一个浏览器的功能实例，浏览器会为HTML文档创建一个专属的window对象，并为每一个框架创建额外的window对象。
window对象是BOM的顶层，所有其他对象都是通过window对象衍生的；但是在调用子对象的时候并不强制要求声明

DOM的document也是window的子对象之一；以下两种写法是相同的:

    window.document.getElementById("herd")
    document.getElementById("herd")

window对象常用方法

弹窗

window.alert() 消息框；弹窗会直接显示一段信息字段

window.confirm() 确认框；弹窗显示text字段的同时给出确认和取消两个按钮，返回true和false

window.prompt() 提示框；弹窗显示字段和一个输入框，并返回输入框内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="button" value="警告框" onclick="showalert()" />
        <input type="button" value="确认框" onclick="showconfirm()" />
        <input type="button" value="提示框" onclick="showprompt()" />
        <script>
            function showalert(){
                window.alert("这是一个警告框");
            }
            function showconfirm(){
                window.confirm("这是一个确认框");
            }
            function showprompt(){
                window.prompt("这是一个提示框");
            }
        </script>
    </body>
</html>

浏览器窗口信息

window.open() 打开新窗口

window.open( url , name , features , replace )

url：需要载入的网页URL地址

name：为新窗口命名

features：可选，窗体的特性定义

属性特性

height 窗口高度

width 窗口宽度

left 左边距

top 左上边距

directories 是否显示链接工具栏

location 是否显示地址栏

menubar 是否显示菜单栏

resizable 是否允许调整窗口尺寸

scrollbars 是否显示滚动条

status 是否显示状态栏

toolbar 是否显示工具栏

属性	特性
height	窗口高度
width	窗口宽度
left	左边距
top	左上边距
directories	是否显示链接工具栏
location	是否显示地址栏
menubar	是否显示菜单栏
resizable	是否允许调整窗口尺寸
scrollbars	是否显示滚动条
status	是否显示状态栏
toolbar	是否显示工具栏

window.close() 关闭当前实例化对象的窗口

window.moveTo() 移动当前窗口

window.resizeBy()/resizeTo() 调整窗口

window.focus() 获得当前对象窗口的焦点

window.blur() 释放当前对象窗口的焦点

window.print() 打印当前窗口或Frame

window.scrollBy()/scrollTo() 滚动当前窗口总的HTML文档

setInterval()/clearInterval() 设置定时器

setTimeout()/clearTimeout() 删除定时器

浏览器窗口尺寸

IE、Chrome、Firefox、Opera、Safan

window.innerHeight 浏览器窗口的内部高度

window.innerWidth 浏览器窗口的内部宽度
IE8以下版本

document.documentElement.clientHeight 高度

document.documentElement.clientWidth 宽度

document.body.clientHeight 高度

document.body.clientWidth 宽度

通常在JavaScript中，一段较为通用代码如下：

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth ;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight ;

窗口页面绝对居中

// 页面绝对居中必须设置style属性： position:absolute;
var left = (w-width)/2;
var top = (h-height)/2;
// 利用margin外边距的top和left来“绝对居中”在浏览器中间
document.getElementById("cen").style.top =  top+"px";
document.getElementById("cen").style.left = left+"px";

浏览器信息:navigator

navigator.appCodeName 返回浏览器代码名称（网景 Mozilla）

navigator.appName 返回浏览器名称

navigator.appVersion 返回浏览器版本号

navigator.Platform 返回浏览器操作系统

userAgent 返回包含内码名称、版本号；用于识别用户

<input type="button" value="浏览器信息" onclick="showversion()"/>
function showversion(){
    // navigator 浏览器信息
    var put = document.getElementById("version");
    put.innerHTML = "代号:"+navigator.appCodeName+"<br/>";
    put.innerHTML+= "名称:"+navigator.appName+"<br/>";
    put.innerHTML+= "版本:"+navigator.appVersion+"<br/>";
    put.innerHTML+= "系统:"+navigator.platform+"<br/>";
    put.innerHTML+= "信息:"+navigator.userAgent+"<br/>";              
}

屏幕对象:screen

属性对象	特性
screen.height	回显屏幕高度
screen.width	回显屏幕宽度
screen.avaiHeight	回显除任务栏的屏幕高度（可用的高度）
screen.avaiWidth	回显除系统部件宽度的宽度（可用的深度）
screen.colorDepth	浏览器分配的颜色或颜色深度
screen.pixelDepth	返回屏幕的颜色分辨率（色彩分辨率）

<input type="button" value="屏幕信息" onclick="showscreen()" />
function showscreen() {
    document.getElementById("screen").innerHTML = "屏幕尺寸:"+screen.height+"*"+screen.width+"<br/>";
    document.getElementById("screen").innerHTML+= "窗口尺寸:"+screen.availHeight+"*"+screen.availWidth+"<br/>";
    document.getElementById("screen").innerHTML+= "色彩深度:"+screen.colorDepth+"/色彩分辨率:"+screen.pixelDepth+"<br/>";
}

地址对象:location

地址对象整理的是当前的URL信息

属性	特性
location.href	整个URL字符串
location.protocol	URL的通信协议部分的字符子串
location.hostname	URL中服务器名、域名子域名或IP地址
location.port	URL中端口号
location.host	hostname + port
location.pathname	URL中的文件或路径名
location.hash	URL中的锚点名称
location.search	URL中表示变量的字符子串
location.reload(true/false)	刷新页面(true/false选择是否从服务器刷新)
location.replace(url)	通过url网址刷新当前网页

历史对象:history

历史对象保存着用户上网的历史记录

属性方法	特性
history.back()	显示浏览器的历史列表中后退一个网址的网页
history.forward()	显示浏览器的历史列表中前进一个网址的网页
history.go(n)/go(url)	显示浏览器的历史列表中的第n个网址网页，大于0表示前进，小于0表示后退，等于0表示刷新当前页