Common BOM operations in JavaScript

BOM object

window object is the top-level object of JS, and other BOM objects are attributes of the window object;
document object, document object;
location object, browser current URL information;
navigator object, browser itself information;
screen object, client screen information;
history object, browser access historical information;

Window object

Window对象:BOM的核心对象是window,它表示浏览器的一个实例。在浏览器中,window对象有双重角色,它既是通过javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。 

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
弹框类的方法。前面省略window
alert('提示信息')
confirm("确认信息")
prompt("弹出输入框")
open("url地址",“打开的方式(可以是-self或-black)”,“新窗口的大小”)注:如果url为空,则默认打开一个空白页面,如果打开方式为空,则默认为新窗口方式打开页面。返回值为:返回新打开窗口的window对象
close()  关闭当前的网页。FF:禁止设置关闭浏览器的代码	Chrome:默认直接关闭	IE:询问用户
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

定时器,清除定时器。
setTimeout(函数,时间) 只执行一次
setInterval(函数,时间) 无限执行
clearTimeout/clearInterval(定时器名称) 清除定时器

location object

window.location object: used to obtain the address (URL) of the current page and redirect the browser to the new page. You can write without using the window prefix.

console.log(location)	查看当前location所有属性或方法

location.herf = 'url地址'
hash 返回#号后面的字符串,不包含散列,则返回空字符串。
host 返回服务器名称和端口号
pathname 返回目录和文件名。 /project/test.html
search 返回?号后面的所有值。
port 返回URL中的指定的端口号,如URL中不包含端口号返回空字符串
protocol 返回页面使用的协议。 http:或https:

navigator object

The window.navigator object contains information about the visitor's browser. You can write without using the window prefix.

navigator.platform:操作系统类型;
navigator.userAgent:浏览器设定的User-Agent字符串。
navigator.appName:浏览器名称;
navigator.appVersion:浏览器版本;
navigator.language:浏览器设置的语言;
userAgent是最常用的属性,用来完成浏览器判断。

screen object

The window.screen object contains information about the user's screen.

screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏。
screen.availHeight 属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏。

document.write(screen.availHeight+screen.availWidth);//获取屏幕的宽度和高度之和

history object

The window.history object contains the browser's history. To protect user privacy, JavaScript's methods of accessing this object are restricted.

window.location.href = '你所要跳转到的页面';
window.open('你所要跳转到的页面’);
window.history.back();返回上一页
window.history.forward();返回下一页
window.history.go(-1/1):返回上一页或下一页
history.go("baidu.com");

Window size and size

可视区尺寸:
	document.documentElement.clientWidth
	document.documentElement.clientHeight
滚动条滚动距离:
	document.documentElement.scrollTop
	document.documentElement.scrollLeft
存在兼容性问题(Chrome与其它浏览器不同),解决办法如下
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;

内容高/宽:元素.scrollHeight/scrollWidth

当一个时间发生时鼠标到页面可视区的距离:event.clientX/event.clientY

Get url

window.location.href; /* 获取完整URL http://localhost:8080/home*/
window.location.pathname; /* 获取文件路径(文件地址) /home*/
window.location.protocol; /* 获取协议 http:*/
window.location.host; /* 获取主机地址和端口号 localhost:8080*/
window.location.hostname; /* 获取主机地址 localhost*/
window.location.port; /* 获取端口号 8080*/
window.location.hash; /* 获取锚点(“#”后面的分段) */
window.location.search; /* 获取属性(“?”后面的分段) */

/* 如果需要URL中的某一部分,可以自己进行处理 */
let url = window.location.pathname;
url = url.substring(url.lastIndexOf('/') + 1, url.length);

Guess you like

Origin blog.csdn.net/rqz__/article/details/131951910