BOM的相关操作

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(屏幕对象)

• offset家族
  offsetWidth / offsetHeight ： 获取的宽高包含 边框 + 内边距 + 元素宽高
  offsetParent ： 获取元素的第一个定位祖先元素 ，如果没有定位的则获取到的是body
  offsetLeft /offsetTop ：获取元素到第一个定位元素的偏移量，如果没有定位的则获取到的是到body的偏移量
• client家族
  clientWidth / clientHeight ： 获取的宽高包含内边距 + 元素宽高
  clientLeft /clientHeight ： 获取 元素的 左边框 或者 顶部边框
• scroll家族
  scrollWidth / scrollHeight ：当内容没超出元素范围时 获取的是 内边框 + 元素宽高
  当内容超出元素范围时 获取的是 内边框 + 元素宽高+超出的宽度
  scrollTop / scrollLeft ：Top获取的是内容超出顶部内边距的距离 Left获取的是内容超出左边内边距的距离

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

特比的：URLSearchParams方法不仅可以获取参数，还可以将参数转化为字符串。

3.利用正则匹配方法

正则可以非常方便的处理一些字符串（校验，替换，提取等操作）

let url = "http://www.baidu.com?name=赵六&age=22&sex=男&wife=老李"
function getUrlParams(url){
	// \w+ 表示匹配至少一个（数字，字母以及下划线）
	let pattern = /(\w+|[\u4e00-\u9fa5]+)=(\w+|[\u4e00-\u9fa5]+)/ig;
	let result = {};
	url.replace(pattern,($,$1,$2) =>{
		result[$1] = $2;
	})
	return result
}
console.log(getUrlParams(url))