JavaScript BOM学习

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 是否显示工具栏

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.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表示刷新当前页

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/wangyuyang1016/p/11853325.html