BOM-浏览器对象模型

一，BOM

BOM 是 browser object model 的缩写，简称浏览器对象模型。主要处理浏览器窗口和框架，描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，譬如可以弹出新的窗口，回退历史记录，获取 url……

二，与DOM关系

1. javacsript 是通过访问 BOM 对象来访问、控制、修改浏览器
2. BOM 的 window 包含了 document，因此通过 window 对象的 document 属性就可以访问、检索、修改文档内容与结构。
3. document 对象又是 DOM 模型的根节点。

因此， BOM 包含了 DOM，浏览器提供出来给予访问的是 BOM 对象，从 BOM 对象再访问到 DOM 对象，从而 js 可以操作浏览器以及浏览器读取到的文档

三，BOM 对象包含哪些内容？

- Window JavaScript 层级中的顶层对象，表示浏览器窗口。
- Navigator 包含客户端浏览器的信息。
- History 包含了浏览器窗口访问过的 URL。
- Location 包含了当前 URL 的信息。
- Screen 包含客户端显示屏的信息。

四，History 对象

History 对象包含用户（在浏览器窗口中）访问过的 URL

- length 返回浏览器历史列表中的 URL 数量。
- back() 加载 history 列表中的前一个 URL。
- forward() 加载 history 列表中的下一个 URL。
- go() 加载 history 列表中的某个具体页面

五，Location 对象

Location 对象包含有关当前 URL 的信息。

- hash 设置或返回从井号 (#) 开始的 URL（锚）。
- host 设置或返回主机名和当前 URL 的端口号。
- hostname 设置或返回当前 URL 的主机名。
- href 设置或返回完整的 URL。
- pathname 设置或返回当前 URL 的路径部分。
- port 设置或返回当前 URL 的端口号。
- protocol 设置或返回当前 URL 的协议。
- search 置或返回从问号 (?) 开始的 URL（查询部分）。

- assign() 加载新的文档。
- reload(‘force’) 重新加载当前文档。参数可选，不填或填 false 则取浏览器缓存的文档
- replace() 用新的文档替换当前文档。

六，Window 对象

Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中， Window 对象是全局对象，所有的表达式都在当前的环境中计算。例如，可以只写 document，而不必写 window.document。

七，Navigator 对象

Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。虽然这个对象的名称显而易见的是 Netscape 的 Navigator 浏览器，但其他实现了 JavaScript 的浏览器也支持这个对象。

八，Screen 对象

Screen 对象包含有关客户端显示屏幕的信息。每个 Window 对象的 screen 属性都引用一个 Screen 对象。 Screen 对象中存放着有关显示浏览器屏幕的信息。 JavaScript 程序将利用这些信息来优化它们的输出，以达到用户的显示要求。例如，一个程序可以根据显示器的尺寸选择使用大图像还是使用小图像，它还可以根据显示器的颜色深度选择使用 16 位色还是使用 8 位色的图形。另外，JavaScript 程序还能根有关屏幕尺寸的信息将新的浏览器窗口定位在屏幕中间。

九，检测浏览器版本版本有哪些方式？

- 根据 navigator.userAgent // UA.toLowerCase().indexOf('chrome')

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>检测浏览器</title>
<script>
var userAgent = navigator.userAgent.toLowerCase();   
function getUserAgent() {    
	if(!/opera/.test(userAgent) && /msie/.test(userAgent) && /msie 7/.test(userAgent))
		alert("IE7");    
	else if(!/opera/.test(userAgent) && /msie/.test(userAgent) && /msie 8/.test(userAgent))
		alert("IE8");  
	else if(/chrome/.test(userAgent))   
		alert("Chrome");  
	else if(/firefox/.test(userAgent))  
		alert("Firefox");  
	else if(/opera/.test(userAgent))  
		alert("Opera");  
	else if(/webkit/.test(userAgent))   
		alert("WebKit");  
	else if(!/chrome/.test(userAgent) && /chrome/.test(userAgent))  
		alert("safari");  
	else
		alert("Others");   
}  	 
getUserAgent();
</script>
</head>
<body>
</body>
</html>

- 根据 window 对象的成员 // 'ActiveXObject' in window 检测是否为IE浏览器

IE有个activeXObject对象,来实现浏览器对本地文件的读写; 而其他的浏览器都是使用的XMLHttpRequest对象

function isIE() {

if (!!window.ActiveXObject || "ActiveXObject" in window)

return true;

else

return false;

}

十，offsetWidth/offsetHeight,clientWidth/clientHeight 与 scrollWidth/scrollHeight 的区别

- offsetWidth/offsetHeight 返回值包含 content + padding + border，效果与 e.getBoundingClientRect()相同
- clientWidth/clientHeight 返回值只包含 content + padding，如果有滚动条，也不包含滚动条
- scrollWidth/scrollHeight 返回值包含 content + padding + 溢出内容的尺寸

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
 #div1{
	width:200px;
	height:200px;
	background:lightBlue;
	padding:25px;
	border:25px solid red;
	overflow:auto
}      
</style>
</head>
<body>
<div id="div1">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
</body>
<script>
   var a = document.getElementById("div1")
    console.log(a.offsetHeight)  //300
    console.log(a.clientHeight)  //250
    console.log(a.scrollHeight)  //344
</script>
</html>

posted @ 2020-09-15 11:19 北巷听雨阅读(243) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

-欲速则不达

每天都要进步一点点