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);
}

---

总结

如有错误欢迎指出，欢迎讨论学习。