BOM（Browser Object Model，浏览器对象模型）

什么是BOM？

       专门操作浏览器窗口的API，与浏览器交互的方法和接口——没有标准，有兼容性问题，表现为不同浏览器定义有差别，实现方式不同。

       BOM是对浏览器本身进行操作，而DOM是对浏览器（可看成容器）内的内容进行操作。

浏览器对象模型

window	代表整个窗口
history	封装当前窗口打开后，成功访问过的历史url记录
navigator	封装浏览器配置信息
document	封装当前正在加载的网页内容
location	封装了当前窗口正在打开的url地址
screen	封装了屏幕的信息
event	定义了网页中事件机制

window的2个角色：

1.代表gobal作为全局作用域对象，所有全局函数和全局变量都是window成员

2.封装所有DOM和BOM的API。

window对象——是浏览器的顶级对象

• window.innerWidth / window.innerHeight：返回浏览器窗口的内部宽度和高度（不包括滚动条）。
• window.outerWidth / window.outerHeight：返回浏览器窗口的外部宽度和高度（包括滚动条和边框）。
• window.location.href：返回当前页面的URL地址。
• window.location.hostname：返回当前页面的主机名。
• window.location.pathname：返回当前页面的路径。
• window.location.search：返回当前页面的查询参数。
• window.location.hash：返回当前页面的锚点。

  	<p>浏览器窗口的内部宽度和高度： <span id="window-size"></span></p>
  	<p>当前页面的URL地址： <span id="page-url"></span></p>
  
  	<script>
  		// 显示浏览器窗口的大小
  		document.getElementById("window-size").innerHTML = window.innerWidth + " x " + window.innerHeight;
  
  		// 显示当前页面的URL地址
  		document.getElementById("page-url").innerHTML = window.location.href;
  	</script>

  结果为：

• 窗口加载事件

window.onload= function(){}
//或者
window.addEventListener("load",function(){});

        window.onload是窗口加载事件，当文档内容完全加载完成会触发该事件

        注意：window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。但是window.addEventListener不存在冲突问题。

• 调整窗口大小事件

window.onresize=function(){}
//或者
window.addEventListener("resize",function(){});

只要窗口大小发生像素变化，就会触发这个事件。

我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕宽度。

this指向        

一般情况下this的最终指向是调用它的对象。

1.全局作用域或者普通函数中this指向全局对象window

console.log(this)
function fun(){console.log(this);}

2.方法调用中谁调用this指向谁

var  Y = {
            sayHi:function(){console.log(this);}//指向Y
        }
Y.sayHi();//Y调用
    

3.构造函数中this指向构造函数的实例

function fun(){
            console.log(this);//指向实例fun
            }
var fun = new fun();

history对象

与浏览器历史记录进行交互。

back()	可以后退功能
forward()	前进功能
go(参数)	1:前进，-1：后退

 <button onclick="goBack()">返回上一页</button>
    <button onclick="goForward()">前往下一页</button>
    <script>
        function goBack(){
            //使用history对象的back()方法返回上一页
            history.back();
        }
        function goForward(){
            //使用history象的forward()方法前往下一页。
            history.forward();
        }
    </script>

location对象

location.assign()	跟href一样，可以跳转页面（重定向），记录历史后退。
location.replace()	替换当前页面，因为不记录历史，所以不能后退页面
location.raload()	刷新，重新加载页面。

 <p id="p1">段落一</p>
    <script>
        var p = document.getElementById("p1")
        p.innerHTML=location.href;
    </script>

结果为

 navigator对象

• navigator.userAgent：返回浏览器的User-Agent字符串，包含了浏览器的名称、版本、操作系统等信息。
• navigator.appName：返回浏览器的名称。
• navigator.appVersion：返回浏览器的版本号。
• navigator.platform：返回浏览器所在的操作系统平台。
• navigator.language：返回浏览器的默认语言。

 <p>浏览器的名称:<span id="name"></span></p>
   <p>浏览器版本号:<span id="version"></span></p>
   <p>操作系统平台:<span id="platform"></span></p>
   <p>默认语言:<span id="language"></span></p>
   <script>
    //获取浏览器信息
    document.getElementById("name").innerHTML=navigator.appName;
    document.getElementById("version").innerHTML=navigator.appVersion;
    document.getElementById("platform").innerHTML=navigator.platform;
    document.getElementById("language").innerHTML=navigator.language;
   </script>

结果是：

 event对象

• event.type：返回事件的类型。
• event.target：返回事件的目标元素。
• event.clientX / event.clientY：返回鼠标指针的位置（相对于浏览器窗口左上角的坐标）。
• event.pageX / event.pageY：返回鼠标指针的位置（相对于文档左上角的坐标）。
• event.keyCode：返回按下的键的ASCII码值。

实例

<button onclick="showEventInfo(event)">点击这里</button>

	<script>
		function showEventInfo(event) {
			// 显示event对象的信息
			alert("事件类型：" + event.type + "\n" +
				  "事件目标元素：" + event.target.tagName + "\n" +
				  "鼠标指针位置（相对于浏览器窗口左上角）：" + event.clientX + "," + event.clientY + "\n" +
				  "鼠标指针位置（相对于文档左上角）：" + event.pageX + "," + event.pageY + "\n" +
				  "按下的键的ASCII码值：" + event.keyCode);
		}
	</script>

结果是：

 screen对象

1. screen.width：屏幕的宽度，以像素为单位。
2. screen.height：屏幕的高度，以像素为单位。
3. screen.availWidth：屏幕可用的宽度，不包括Windows任务栏等。
4. screen.availHeight：屏幕可用的高度，不包括Windows任务栏等。
5. screen.colorDepth：屏幕的颜色深度，表示每个像素使用的比特数，通常为16位或32位。

实例：

<p>Screen Width: <span id="sw"></span></p>
	<p>Screen Height: <span id="sh"></span></p>
	<p>Available Width: <span id="aw"></span></p>
	<p>Available Height: <span id="ah"></span></p>
	<p>Color Depth: <span id="cd"></span></p>

	<script>
		document.getElementById("sw").innerHTML = screen.width;
		document.getElementById("sh").innerHTML = screen.height;
		document.getElementById("aw").innerHTML = screen.availWidth;
		document.getElementById("ah").innerHTML = screen.availHeight;
		document.getElementById("cd").innerHTML = screen.colorDepth;
	</script>

 结果为：

 

第六周蓝旭培训总结