BOM概念
- BOM : Browser Object Model 浏览器对象模型，描述与浏览器进行交互的方法和接 口， ECMAscript是javascript的核心，但如果要在web中使用javascript，那么BOM则无疑才是真正的核心。
- BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。
window对象介绍
BOM 的核心对象是 window ，它表示浏览器的一个实例。在浏览器中， window对象有双 重角色，它既是通过 JavaScript 访问浏览器窗口的一个接口，又是ECMAScript 规定的全局（global）对象。这意味着在网页中定义的任何一个对象、变量和函数，都以 window 作 为其Global 对象，因此有权访问parseInt()等方法。
window内置对象(location/history/navigator)及方法
- location对象
- href属性 控制浏览器地址栏的内容
- reload()方法 刷新页面
location.reload(true);从缓存里面获取。性能更好。
- history对象
history对象是window对象的属性
浏览者通常可以使用浏览器的前进与后退按钮访问曾经浏览过的页面。JavaScript的history对象记录了用户曾经浏览过的页面，并可以实现浏览器前进与后退相似的导航功能
可以通过back函数后退一个页面，forward函数前进一个页面，或者使用go函数任意后退或前进页面。
JavaScript history.go() 函数 -- 前进或后退指定的页面数
JavaScript history.back() 函数 -- 后退一页
JavaScript history.forward() 函数 -- 前进一页
JavaScript history.length 属性 -- history对象中缓存了多少个URL
- navigator对象
userAgent 用户代理信息，通过该属性可以获取浏览器及操作系统信息
BOM相关的事件和操作
- onload事件：页面内容加载完成（DOM结构，图片.....）
当页面加载完成时(DOM结构，内容，网页信息)，执行函数里面的代码，一个页面只能有一个onload事件。
- onscroll事件：拖动浏览器的滚动条触发此事件。(连续触发)
- onresize事件：浏览器窗口缩放所触发的事件。(连续触发)
- 可视区的宽高：document.documentElement.clientWidth/clientHeight
- 滚动条距离
document.documentElement.scrollTop //chrome
document.body.scrollTop //firefox和ie
//使用if或三目做兼容
- open() 和 close() 方法--打开一个页面/关闭一个页面（了解）
window.close();//关闭当前页面，不是浏览器
document.onkeydown=function(){
if(confirm('你确定要关闭吗？')){//选择确定返回true 取消：false 选择
window.close();//关闭当前页面，不是浏览器。
}else{
alert('算你识相');
}
}
- alert() prompt() confirm()方法：confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。
- 定时器
setInterval(函数名称，时间)；间隔定时器(反复调用)
clearInterval( 定时器的返回值 ); 停止定时器
setTimeout(函数名称，时间); 延时定时器
clearTimeout( 定时器的返回值 ); 停止定时器
//异步：代码彼此不影响。
//定时器模拟异步执行代码。
/*setInterval(function(){
alert(dfadsfad);
},0);//即使时间为0，进入队列，比正常的语句慢。
- 应用
1．广告弹出窗(自动关闭)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0px;margin: 0px;
}
#ad{
width: 100%;
height: 80px;
margin:0 auto;
background: #000000;
text-align: center;
position: relative;
}
#ad i{
position: absolute;
right:100px;
top:5px;
color:#fff;
cursor: pointer;
font-style: normal;
}
#ad span{
color:#fff;
position: absolute;
left:10px;
top:30px;
}
</style>
</head>
<body>
<div id="ad">
<img src="1.jpg"/>
<i>X</i>
<span>离广告关闭还有<strong>5</strong>秒</span>
</div>
<script type="text/javascript">
//延时定时器 setTimeout(函数,时间)；
//关闭延时定时器 clearTimeout(延时定时器的返回值)；
//间隔定时器：setInterval(函数,时间)；
//关闭间隔定时器 clearInterval(间隔定时器的返回值)；
//同步：代码按照一定的顺序执行。
//alert(dfadsfad);//报错，代码结束
//alert(123);
//异步：代码彼此不影响。
//定时器模拟异步执行代码。
/*setInterval(function(){
alert(dfadsfad);
},0);//即使时间为0，进入队列，比正常的语句慢。
alert(123);*/
/*function fn(){
document.body.style.background='#ccc';
}
setTimeout(fn,3000);*/
var ad=document.getElementById('ad');
var close=document.getElementsByTagName('i')[0];
var oStrong=document.getElementsByTagName('strong')[0];
var timer=null;
close.onclick=function(){
ad.style.display='none';
}
var timevalue=oStrong.innerHTML;
timer=setInterval(function(){
timevalue--;
if(timevalue==0){
ad.style.display='none';
clearInterval(timer);
}
oStrong.innerHTML=timevalue;
},1000);
</script>
</body>
</html>
- 添加倒计时效果
- 盒子完全居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子完全 居中</title>
<style type="text/css">
body{
height: 2000px;
}
#box{
width: 200px;
height:300px ;
background: #ccc;
position: absolute;
left:0px;
top:0px;
}
#box span{
position: absolute;
right:10px;
top:10px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<span>X</span>
</div>
<script type="text/javascript">
var oBox=document.getElementById('box');
var oSpan=document.getElementsByTagName('span')[0];
/*window.onload=function(){
oBox.style.left=(document.documentElement.clientWidth-200)/2+'px';
oBox.style.top=(document.documentElement.clientHeight-300)/2+'px';
}
window.onresize=function(){
oBox.style.left=(document.documentElement.clientWidth-200)/2+'px';
oBox.style.top=(document.documentElement.clientHeight-300)/2+'px';
}*/
/*var a=b=2;
alert(a);
alert(b);*/
window.onload=window.onresize=function(){
oBox.style.left=(document.documentElement.clientWidth-200)/2+'px';
oBox.style.top=(document.documentElement.clientHeight-300)/2+'px';
}
window.onscroll=function(){
var top=document.documentElement.scrollTop||document.body.scrollTop;
oBox.style.left=(document.documentElement.clientWidth-200)/2+'px';
oBox.style.top=(document.documentElement.clientHeight-300)/2+top+'px';
}
oSpan.onclick=function(){
oBox.style.display='none';
}
</script>
</body>
</html>
DOM的概念及作用
DOM是”Document Object Model”的首字母缩写，即文档对象模型。用来描绘一个层次 化的节点树，允许开发人员获取、添加、移除和修改页面的某一部分。 浏览器支持情况：不友好，有兼容问题
（元素节点、属性节点、文本节点）
DOM的基本操作
- 查询（获取元素）
getElementById() //获取特定 ID 元素的节点
getElementsByTagName() //获取相同元素的节点列表，返回类数组，使用[0]来获取
getElementsByClassName() //获取相同类名的节点列表（IE8及以下不支持），返回类数组
getElementsByName() //获取相同的name值的元素列表，不是所有标签都有name属性，返回类数组
querySelector()/querySelectorAll()//---html5新增
//参数是css选择器：是一种快速选择，css怎么选择，这两个方法也满足。
//注意选择器前面的符号要添加。
//querySelector()：如果选择器有多个，只找第一个
//querySelectorAll() 符合所有的选择器的多个元素
//alert(document.querySelectorAll('#box li').length);
//alert(document.querySelector('.li1').innerHTML);
- 创建、添加、删除、克隆、替换
document.createElement() //创建一个元素节点；**创建之后appendChild**
document.createTextNode() //创建一个文本节点，括号中写文本内容
box.appendChild(node) //把node节点插入到box的内部最后的位置
var cH1=document.createElement('h1');//元素对象
cH1.innerHTML='大标题';
document.createTextNode() 创建一个文本节点
var cT=document.createTextNode('创建出来的文本');
cH1.style.background='green';
box.appendChild(node) 把node节点插入到box的内部最后的位置
cH1.appendChild(cT);//将文本节点赋值给cH1
document.body.appendChild(cH1);//将整个cH1赋值给body元素，显示在页面上
//拼接
document.body.innerHTML+='<h2>二标题</h2>';//常用（性能原因）
box.insertBefore(newNode, existNode) //把newNode节点插入到exsitNode的前面
box.removeChild(node) //删除子节点 注意:一定是移除子节点.同时通过父节点移除子节点.
obj.cloneNode() //复制节点,复制obj元素标签，可以传一个布尔值为参数，如果参数为true，连同obj子元素一起复制。
obj.replaceChild(新添加的节点 , 被替换的节点);
应用
1．顶部悬浮
2．回到顶部
3．动态创建表格--封装函数（DOM创建）
