飞比寻常 (JOE) 生，简单，活，简单，生活，不简单！
JOE个人网站
JOE个人网站，不仅仅是一个网站，更像是一个展现自我的平台，致力于让朋友们都可以
有所感触，有所收获。
十一、BOM
BOM -- Browser Object Model (浏览器对象模型)
DOM -- Document Object Model (文档对象模型)
JS中所有的方法和对象都是基于window对象的，所以window可以在编码中省略不写；
如：
alert() 等效为 window.alert();
alert(); 弹出一个窗体，在窗体中有确定按钮；
confirm(); 弹出一个可以取消的窗体，如果选择确定返回真，取消返回假；
如：
if(confirm('AAAA')) {
document.write('B');
} else {
document.write('C');
}
prompt('请输入性别',['默认值']);弹出一个可以输入内容的窗体，输入的内容可以返回到程序中处理；
如：
var str=prompt('请输入您的性别:','男');
if(str=='男') {
document.write('男人是泥巴做的');
} else if(str=='女') {
document.write('女人是水做的');
} else {
document.write('人妖是水泥做的');
}
setTimeout 间隔一段时间后执行程序，程序只执行一次
clearTimeout 清除
如：
<script>
var s=setTimeout(function() {
alert('AAAAAA');
},3000);
</script>
<button onclick="clearTimeout(s)">清除</button>
setInterval 间隔一段时间后执行程序，程序重复执行
/////////////////////// CLOCK /////////////////
<script>
var oy=document.getElementById('y');
var om=document.getElementById('m');
var od=document.getElementById('d');
var oh=document.getElementById('h');
var oi=document.getElementById('i');
var os=document.getElementById('s');
setInterval(function() {
var odate=new Date();
//var iy=parseInt(oy.innerHTML);
//var im=parseInt(om.innerHTML);
//var id=parseInt(od.innerHTML);
//var ih=parseInt(oh.innerHTML);
//var ii=parseInt(oi.innerHTML);
//var is=parseInt(os.innerHTML);
oy.innerHTML=odate.getFullYear()+'年 ';
om.innerHTML=odate.getMonth()+1+'月 ';
od.innerHTML=odate.getDate()+'日 ';
oh.innerHTML=odate.getHours()+':';
oi.innerHTML=odate.getMinutes()+':';
os.innerHTML=odate.getSeconds();
},1000);
</script>
////////////// date /////////////////////////////
<script>
//var odate=new Date();//如果什么参数都没有 表示当前时间
var odate=new Date('12 15 2012 23:46:52');//可以通过传入字符串的形式指定时间 格式：月 日 年 时：分：秒
document.write('年:'+odate.getFullYear()+'<br/>');//返回当前年份（4位数的年份） 注：该时间是客户端的系统时间,不一定准
document.write('月:'+odate.getMonth()+'<br/>');//返回月份 但是该月份是当前月份减1（0-11）
document.write('日:'+odate.getDate()+'<br/>');//返回日期
document.write('星期:'+odate.getDay()+'<br/>');//返回星期（0-6）
document.write('小时:'+odate.getHours()+'<br/>');//返回小时数
document.write('分钟:'+odate.getMinutes()+'<br/>');//返回分钟
document.write('秒:'+odate.getSeconds()+'<br/>');//返回秒
document.write('毫秒:'+odate.getMilliseconds()+'<br/>');//返回毫秒
</script>
//////////////////// setInterval应用--进度条的编写 ///////////////////////
<body>
<div id="wai" style="width:50px;height:650px;border:2px solid gray;">
<div id="nei" style="width:50px;height:0px;background:green;"></div>
</div>
<button onclick="pree()">下载</button>
<script type="text/javascript" charset="utf-8">
var owai=document.getElementById('wai');
var onei=document.getElementById('nei');
var iheight=parseInt(onei.style.height);
var iheight2=parseInt(owai.style.height);
function pree() {
var s=setInterval(function() {
iheight+=3;
if(iheight>=iheight2) {
clearInterval(s);
}
onei.style.height=iheight+'px';
},10);
}
</script>
</body>
/////////////////////////////////////////////////////
问题：
document.write();
当文档已经加载完成后，如果要向文档写入新的内容，处理的方式是，生成新的文档再写入，如：
<script>
document.write('AAAA');
document.write('BBBB');
</script>
<a href="javascript:document.write('abc')">点我</a>
<p onclick="document.write('def')">bbbb</p>
Navigator 对象：包含有关浏览器的信息
window.navigator.userAgent //返回浏览器的信息
通过这个方法可以判断客户端的浏览器各类
如：
<script>
var str=window.navigator.userAgent;
str=str.toLowerCase();
if(str.indexOf('msie')>0) {
alert('您用的是IE');
} else if(str.indexOf('firefox')>0) {
alert('您用的是火狐');
} else if(str.indexOf('chrome')>0) {
alert('您用的是chrome');
} else {
alert('其他');
}
</script>
History 对象
back 后退
forward 前进
go 指定history记录
如：
<a href="javascript:window.history.forward()">前进</a>
<a href="javascript:window.history.back()">后退</a>
<a href="javascript:window.history.go(-2)">后退2次</a>
如2：
<div id="did">3</div>
<script>
var odiv=document.getElementById('did');
var idiv=parseInt(odiv.innerHTML);
var s=setInterval(function(){
idiv--;
if(idiv==0) {
clearInterval(s);
window.history.back();
}
odiv.innerHTML=idiv;
},1000);
</script>
Location 对象
reload() 刷新
<a href="javascript:window.location.reload()">刷新</a>
跳转到某一个具体页面可以
window.location="http://www.baidu.com";
如：
setTimeout(function() {
window.location="./jindutiao.html";
},3000);
=============DOM==========================
DOM Document Object Model 文档对象模型
什么是文档对象模型：就是我们编写的HTML代码在页面中显示的部分；
核心思想：在某个事件源上触发某个事件，由这个事件调用处理程序，在程序中找对象，改属性！
事件源：在那里开始的动作（动作发源地）
事件:动作（干了什么）
处理程序：写的自定义函数
对象：动作最终要影响的目标
属性：对象的属性
在HTML中什么是对象？
一个完整的（成对或者单标签）标签就是对象
对象的属性就是标签的属性
对象的属性值就是标签的属性值
技巧：在head头中使用JS代码
window.onload只有在页面全部加载完成后才执行，利用这个机制可以将js代码全部写入到head头里面
window.onload=function() {
var op=window.document.getElementById('p1');
alert(op.id);
}
如何找对象
1、通过ID找对象
document.getElementById('id');
2、通过标签名找对象
document.getElementsByTagName('p');
注意：返回的是节点列表对象，我们应该用数组的方式使用该对象
如：
<script type="text/javascript" charset="utf-8">
window.onload=function() {
var odiv=document.getElementsByTagName('p');
//for(n in odiv) {
// alert(odiv[n].innerHTML);
//}
for(var i=0;i<odiv.length;i++) {
alert(odiv[i].innerHTML);
//document.write(odiv[i].innerHTML);
}
}
</script>
</head>
<body>
<p>a</p>
<p>b</p>
<p>c</p>
<p>d</p>
</body>
补充：解决兼容性问题，可以加DTD头
innerText 获取标签中的文本
在火狐中，该方法使用 textContent获取
//////// 进度条 ////////////////////////////////////
<div id="wai" style="width:900px;background:gray;border:2px solid black;height:50px;">
<div id='nei' style="width:0px;background:red;height:50px;"></div>
</div>
<button onclick="process()">下载</button>
<script>
var owai=document.getElementById('wai'); //获取外部div的对象
var onei=document.getElementById('nei'); //获取内部div的对象
var iwidth=parseInt(onei.style.width);//获取内部div的宽度
var iwidth2=parseInt(owai.style.width);//获取内部div的宽度
//alert(iwidth);
//利用定时处理程序，设置为每10毫秒执行
function process() {
var s=setInterval(function() {
iwidth+=3; //内部div的宽度自加3
if(iwidth>=iwidth2) { //当内部div宽度大于等于外部div宽度，则程序停止
clearInterval(s); //停止Interval程序
alert('您的下载完成');
}
onei.style.width=iwidth+'px'; //将新的内部的div宽度写入到对象中
},10);
}
</script>
//////////////////////////////////////////////////////