javaScript BOM对象分析整理

###什么是BOM

BOM 是 browser object model 的缩写，意思是浏览器对象模型

BOM提供了独立于内容而与浏览器窗口进行交互的对象

BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window

BOM由一些列相关对象构成，并且每个对象提供 很多方法与属性

BOM缺乏标准，javascript 语法的标准组织是ECMA，DOM的标准组织是W3C

BOM 最初是Netscape 浏览器标准的一部分

**ECMA：前身为欧洲计算机制造商协会，英文名称是 European Computer Manufacturers Association,人们常常看到的ECMAscript 是通过ECMA-262 标准化的脚本程序设计语言。

**ECMAscript 5，ECMAscript 6 就是说符合相关标准，符合ECMA-262 规范，现在最新已经达到了ECMAscript 7 ，具体还在草拟。ECMAscript 6 尚未普及，原因是低版本浏览器尚有一定份额市场。

**W3C ： World Wide Web Consortium，万维网联盟，创于1994年，是web技术领域最具权威和影响力的国际中立性技术标准机构。

**WCAG：web内容的信息无障碍指南。由W3C提出。

---

##BOM的结构图

##WIndow 函数索引 ###窗口控制函数 *javascript moveBy() 函数 moveBy -- 从单前水平移动x个像素，垂直移动y个像素。

window.moveBy(x,y);

复制代码

---

*javascript moveTo() 函数 moveTo -- 移动到 （x,y）点。

window.moveto(x,y)
复制代码

---

**javascript resizeBy() 函数 resizeBy -- 相对于窗口当前的大小，宽度调整w个像素，高度调整h个像素，如果为负数则为缩小窗体。

window.resizeBy()
复制代码

---

*javascript resizeTo() 函数 resizeTo -- 调整窗口大小到（w,h）

window.resizeTo(w,h)
复制代码

---

###窗口滚动轴控制函数 **javascript scrollTo() scrollTo -- 将横向滚动条滚动到相对于窗体宽度为x个像素的位置，将纵向滚动条移动到现对于窗体高度为y个像素的位置。

scrollTo(x,y)
复制代码

** javascript scrollBy() scrollTo -- 如果有滚动条，将横线向左移动x个像素，将纵向滚动条向下移动y个像素。

scrollTo(x,y)

复制代码

---

###窗口焦点控制函数

• javascript focus（）函数 focus --使窗体或控件获取焦点

focus();
blur();//失去焦点
复制代码

• javascript blur() blur -- 模糊，使窗体或者控件失去焦点

blur();
复制代码

---

###新建窗体函数 -- open() 打开 -- close() 关闭 -- opener 属性,开启者 可以实现窗体之间的通讯，当时要保证是在同一域名下，而且窗体要包涵另为一个窗体的opener

var oWin=window.open("http://www.dreamdu.com/", "dreamduwin");
if(!oWin||!oWin.closed)
{
        document.write(oWin.opener==window);
}
复制代码

---

###对话框函数 -- alert()
-- confirm() 对话框包涵OK和Cancel 按钮 -- prompt()
对话框包涵OK，cancel 和输入框

var sResult=prompt("请在下面输入你的姓名", "梦之都");
if(sResult!=null)
{
        alert("你好"+sResult);
}
else
{
        alert("你好 my friend.");
}
复制代码

---

###状态栏属性 -- window.defaultStatus 属性 -- window.status 属性 上面俩个属性大部分浏览器不支持

---

###时间等待与间隔函数 --setTimeout(callback, after); 指定多少毫秒后执行指定代码。

<script>
		setTimeout(function(){
			alert('haha');
		}, 1000);
</script>
复制代码

-- clearTimeout(id) 取消指定的 setTimeout 函数将要执行的代码

<script>
	 var ftnId = setTimeout(function(){
			alert('haha');
		}, 1000);
        //清除
	 clearTimeout(ftnId);
	</script>
复制代码

-- setInterval(callback, repeat); 间隔指定的毫秒数不停执行指定的代码

<script>
	 var funId = setInterval(printLog, 1000);
	 function printLog(){
	 	console.log('log');
	 }
</script>
复制代码

--clearInterval(funId) 清除取消指定的setInterval 函数将要执行的代码

<script>
	 var funId = setInterval(printLog, 1000);
	 function printLog(){
	 	console.log('log');
	 }
        //可以加相关的条件判断，达到一定条件就清除
        clearInterval(funId);
</script>
复制代码

---

javascript frames 对象

--window 当前框架 --top 最顶层的框架，浏览器本体 --parent 包涵当前框架的父框架 --self 当前框架，总等于window对象

javascript histroy 对象函数

history.go(num)

去历史的指定页数,num负数为后退指定页数，正数为前进指定页数

<a href="javascript:history.go(-1);">返回上一页</a>

复制代码

history.back();

后退一页，需要有跳转后才有效果

history.forward();

历史的前一页，需要点击返 回该事件才有效果

详情请打印history 对象查看

---

###location 对象

转载于:https://juejin.im/post/5a3217b5f265da431a43359f