js操作BOM
什么是Bom？
- BOM即浏览器对象模型。
- BOM提供了独立于内容 而与浏览器窗口进行交互的对象；
- 由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；
- BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；
- BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。
有哪些常用的Bom属性
1.navigator（浏览器对象）
1.如何检测浏览器的类型（ua问题）？
//如何检测是否为Chrome浏览器
var ua = navigator.userAgent;
console.log(ua);
var isChrome = ua.indexOf('Chrome');
console.log(isChrome) //true为是，false为不是
2.screen(屏幕对象)
screen.width; //屏幕宽度
screen.height; //屏幕高度
3.location(地址对象)
location的相关操作
location.href //返回或设置当前文档的url
location.search //返回URL中的查询字符串部分，可用于解析url
location.hash //返回url#后面的内容，如果没有#，返回为空
location.host //返回url中域名部分，例如：www.baidu.com
location.hostname //返回url中的域名后的部分
location.pathname //返回url的域名后的部分
location.port //返回url中的端口部分。
location.protocol //返回url中的协议部分
location.assign //设置当前文档的URL
location.replace() //设置当前文档的url，并且在history对象地址列表中移除这个URL location.replace(url);
location.reload() //重载当前页面
4.history(历史对象)
history.go() //前进或后退指定的页面数history.go(num)
history.back() //后退一页
history.forward() //前进一页
前端js获取URL参数的几种方法
1.字符串split方法（因为一个url地址是字符串形式的，所以利用split方法将参数提取出来）
let url = "http://www.baidu.com?name=李四&age=22&sex=男&wife=王五"
function getUrlParams(url){
//通过？分割后面的字字符串
let urlStr = url.split('?')[1]
//创建空对象存储参数
let obj = {};
//再通过&将每一个参数单独分割出来
let paramsArr = urlStr.split('&')
for(let i = 0,len = paramsArr.length;i < len;i++){
//再通过 = 将每一个参数分别切割为key:value的形式
let arr = paramsArr[i].split('=')
obj[arr[0]] = arr[1];
}
return obj
}
console.log(getUrlParams(url))
2.利用URLSearchParams方法
在MDN中结合两种方法实现参数的获取：1.使用new URLSearchParams(url)方法，返回一个URLSearchParams对象，再调用entries方法返回一个可迭代对象（Iterator）；2.使用Object.fromEntries(iterable)方法转化为普通对象
let url = "http://www.baidu.com?name=李四&age=22&sex=男&wife=王五"
function getUrlParams(url){
let urlStr = url.split('?')[1]
const urlSearchParams = new URLSearchParams(urlStr)
const result = Object.fromEntries(urlSearchParams.entries())
return result
}
console.log(getUrlParams(url))
