JavaScript如何获取内核信息及BOM常用操作

BOM浏览器对象模型

首先简单直白的来了解一下什么是BOM:通俗的来讲就是操作浏览器的相关方法或者浏览器信息的对象。(window)


前言

本篇文章主要是总结了,BOM浏览器对象模型,以及操作BOM的方法。

一、什么是BOM?

1、Browser Object Model:浏览器 对象 模型
2、那么我们操作浏览器的时候用的就是,window对象

二、BOM的组成

window{
	document
	location
	navigation
	screen
	history
}

三、有了浏览器对象模型可以得到什么?

1、当你console.log(window)时候你会获得很多很多的属性和方法。让然这些并不需要全部都记住。
2、首先可以获得浏览器的信息比如,获取浏览器版本(包含内核信息),以及你当前使用的是什么浏览器:

window.navigator.userAgent
//获得信息,就是一个字符串(当然这是信息中包含浏览器的版本,以及浏览器位数)
Chrome/86.0.4240.198
//当然navigator中还有其它方法,可以获得单个具体信息。

3、常见的浏览器弹窗

alert(1) //没有返回值
undefined
prompt("hello")//返回字符串,如果不输入内容,返回空字符串
""
prompt("hello")//
"world"
confirm("queren")//是否确认信息,确认返回true,取消返回false
true
confirm("queren")
false

4、获得浏览器的高度和宽度

window.innerWidth   //当前浏览器可视窗口的宽度
window.innerHeight	
window.scrollX    //横向滚动条的高度
window.scrollY	

5、获取浏览器地址的信息

window.location.href //获取当前页面的url地址,可以直接赋值修改地址
//例如:
window.location.href = "https://www.baidu.com"
window.location.hostname //主机的域名
window.location.pathname //当前页面的路径和文件名
window.location.port  //主机的端口 (80 或 443)
window.location.protocol //所使用的 web 协议(http:// 或 https://)
window.location.search //请求参数包含?的所有内容

6、获取当前浏览器浏览网页的历史记录

window.history.go(1) //参数可写任意整数,正数前进,负数后退
window.history.back() //后退
window.history.forward() //前进
window.history.length //属性 – history对象中缓存了多少个URL(可以记录浏览器究竟在当前有多少个历史;)

7、常用的事件相关

window.onload = function(){}//这个事件会等页面的结构和图片加载完后执行
window.onscroll = function(){}//这个事件会监听浏览器的滚动,当浏览器窗口滚动的时候可以获取到页面滚动的高度和宽度。
window.onscroll = function () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
    console.log(scrollTop, scrollLeft);
}

总结

如有错误欢迎指出,欢迎讨论学习。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值