<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>window对象</title> ???<!-- ???BOM:(浏览器对象模型 ?Browser ??Object Model) ??????浏览器页面的 前进 ??后退 ?刷新 ?页面跳转 都是Bom！ ??????对整个浏览器窗口进行交互的对象模型！ ????包含的内容（对象）： ????1.window对象 ??????????01.history ?属性 ??????????02.location 属性 ????2.document对象 ????window对象 ????????常用的属性： ??????????01.history ?属性 ??????????02.location 属性 ????????常用的方法： ???????????alert() ?:只有一个对话框和一个确认按钮 ???????????prompt() ：提示用户输入的对话框 ???????????confirm（）：有一个确认按钮和取消按钮的对话框 ???????????close(): 关闭浏览器窗口 ???????????open()：打开一个新的浏览器窗口 ???????????定时函数： ????????????01.setTimeout():在指定毫秒数之后，执行某个方法！ 只执行一次 ????????????02.setInterval():每间隔指定的毫秒数，都会执行一次！ ??????window.open("弹出的窗口url"，"窗口的名称"，"窗口的特性") ???--></head><body><script ?type="text/javascript"> ???var ?flag= confirm("确定关闭本窗口吗？"); ?????if(flag){ ?????????window.close(); ?//浏览器窗口关闭 ?????}else{ ?????????//window.open("http://www.baidu.com","百度首页"); ?????????window.open("http://www.baidu.com","百度首页","height=400,width=400"); ?????}</script></body></html><!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>history对象</title> ???<!-- ??????history对象常用的三个方法： ??????01.back（） ??：后退 ??????02.forward（）：前进 ??????03.go() ??????：跳转至指定的url ????--></head><body> ?<a href="02history对象.html">当前页面</a> ?<a href="03history对象2.html">下一个页面</a> ?<a href="javascript:history.forward()">history.forward()下一个页面</a> ?<a href="javascript:history.go(2)">history.go(2)下一个页面</a><script type="text/javascript"></script></body></html>
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>history对象2</title></head><body>history对象2 ?第二个页面<a ?href="javascript:history.back()">history.back()后退一个页面</a><a ?href="javascript:history.go(-1)">history.go(-1)后退一个页面</a></body></html>
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>location对象</title> ???<!-- ???location对象 ??????常用方法： ???????reload（）:刷新页面 ???????replace():使用新的页面替换当前页面 ??????常用属性： ???????host：主机名+端口号 ???????hostname:主机名 ???????href：完整的url ???????hash:返回#之后的所有字符串 ???????search:返回?之后的所有字符串 ???--></head><body><a ?href="javascript:doubleC();">百度</a><script type="text/javascript"> ????document.write("host值为："+location.host+"<br/>"); ????document.write("hostname值为："+location.hostname+"<br/>"); ????document.write("href值为："+location.href+"<br/>"); ????document.write("hash值为："+location.hash+"<br/>"); ????document.write("search值为："+location.search+"<br/>"); ??var flag= ??confirm("确定跳转页面吗？"); ????if(flag){ ????????location.href="http://www.baidu.com"; ????} ???//当用户点击百度 超链接时触发的事件 ???function ?doubleC(){ ???????location.href="http://www.jd.com"; ???}</script></body></html><!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>document对象</title> ???<!-- ???document对象 ?????常用的方法： ???????write（）:在页面中书写内容 ???????getElementById(): 获取页面中指定id的对象！ 一个对象 ???????getElementsByName("sex"): 获取页面中所有name属性值为sex的对象 ！ 数组 ???????getElementsByTagName("div"): 获取页面中所有标签为div的对象 ！ 数组 ???常用的属性： ???referrer: ???????????当浏览器向web服务器发送请求的时候，一般会带上referrer， ???????????告诉服务器我是从哪个页面链接过来的，服务器基此可以获得一些信息用于处理。 ???url： 返回当前页面的url ???--></head><body> <script type="text/javascript"> ????document.write("document.referrer的值是："+document.referrer); </script></body></html><!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>referrer属性</title></head><body> <a ?href="05document对象.html">推广地址</a></body></html>
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<style type="text/css"> ???????body{font-size:14px; ???????????line-height:30px; ???????} ???????input{margin:1px; ???????????width:90px; ???????????font-size:12px; ???????????padding:0; ???????} ???????#node{ ???????????width:100px; ???????????font-size:24px; ???????????font-weight:bold; ???????????float: left; ???????} ???</style> ???<script type="text/javascript"> ???????/*改变层内容*/ ???????function changeLink(){ ???????????//获取页面中id属性值是node的节点 ?????????var ?node= document.getElementById("node"); ????????// ??node.innerText="<h1 style=‘color:red‘>haha</h1>"; ??innerText：会把整个内容当成文本来输出！ ?????????????node.innerHTML="<h3 style=‘color:red‘>haha</h3>";//innerHTML:会编译内容中的html标签以及样式 ???????} ???????/*获取所有input标签中所有的value值*/ ???????function all_input(){ ?????????var allInputs= document.getElementsByTagName("input"); ?// 是一个数组 ???????????var result=""; ???????????for(var i=0;i<allInputs.length;i++){ ???????????????result+= allInputs[i].value+"<br/>"; ???????????} ???????????//把所有的结果 给 id=s的元素 ???????????document.getElementById("s").innerHTML=result; ???????} ???????/*获取所有name属性值是season的value*/ ???????function s_input(){ ???????????var allSeasons= document.getElementsByName("season"); ?// 是一个数组 ???????????var result=""; ???????????for(var i=0;i<allSeasons.length;i++){ ???????????????result+= allSeasons[i].value+"<br/>"; ???????????} ???????????//把所有的结果 给 id=s的元素 ???????????document.getElementById("s").innerHTML=result; ???????} ???</script></head><body><div id="node">新浪</div><input name="b1" type="button" value="改变层内容" onclick="changeLink();" /><br /><br /><input name="season" type="text" value="春" /><input name="season" type="text" value="夏" /><input name="season" type="text" value="秋" /><input name="season" type="text" value="冬" /><br /><input name="b2" type="button" value="显示input内容" onclick="all_input()" /><input name="b3" type="button" value="显示season内容" onclick="s_input()" /><p id="s"></p></body></html><!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>Date对象</title> ???<!-- ???Date对象: ?????getDate()：获取是一个月中的哪一天？ 1-31 ?????getDay（）：获取是一周中的哪一天？ ?0-6 ?????getHours（）：获取是一天中的小时 ?0-23 ?????getMinutes（）：获取是分钟 0-59 ?????getSeconds（）：获取是秒数 ?0-59 ?????getMonth（）：获取是一年中的第几个月？ ?0-11 ?????getFullYear():获取年份 ?????getTime():返回1970年1月1日到现在的毫秒数 ???--></head><body><script type="text/javascript"> ??????var ?today=new Date(); ?//当前的系统时间 ?????document.write(today); ???//获取年月日 ?????var year= today.getFullYear(); ?????var month= today.getMonth()+1; ?????var date= today.getDate(); ?????var hours= today.getHours(); ?????var min= today.getMinutes(); ?????var s= today.getSeconds(); ??document.write("当前系统时间是："+year+"年:"+month+"月:"+date+"日 "+hours+":"+min+":"+s)</script></body></html><!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>Math对象</title> ???<!-- ???Math对象: ??????ceil（）:向上取整 ??????floor()：向下取整 ??????random（）:随机数 ??????round（）：四舍五入 ???--></head><body> ?<script ?type="text/javascript"> ?????document.write("25.5ceil===》"+Math.ceil(25.5)+"<br/>"); ?????document.write("25.5floor===》"+Math.floor(25.5)+"<br/>"); ?????document.write("25.5round===》"+Math.round(25.5)+"<br/>"); ?</script></body></html><!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>定时函数</title> ???<!-- ???01. setTimeout函数 ??在一个指定的时间点，去指定一个指定的函数 ???02.setInterval函数 ??每隔多少时间就会执行一次指定的函数 ???--></head><body> ??<div id="nowTime"></div> ??<button type="button" ?onclick="setOne();"> setTimeout函数</button> ??<button type="button" ?onclick="clearOne();"> 清空setTimeout函数</button> ??<button type="button" ?onclick="setTwo();"> setInterval函数</button> ??<button type="button" ?onclick="clearTwo();"> 清空setInterval函数</button><script type="text/javascript"> ???var ?num=0; ?//成员变量 ?function one(){ ?????//获取页面中空元素 并赋值 ?????document.getElementById("nowTime").innerHTML="数字："+(++num); ?} ???//声明 定时函数的变量 ???var ?timeout,intervar; ????function setOne(){ ?//设置定时函数 ????????timeout=setTimeout("one()",2000); ????} ???function ?clearOne(){//清空定时函数 ???????clearTimeout(timeout); ???} ???function ?setTwo(){ ?//周期性的执行 one（）函数 ???????intervar=setInterval("one()",1000); ???} ???function ?clearTwo(){ ?//周期性的执行 one（）函数 ???????clearInterval(intervar); ???}</script></body></html>js操作BOM对象
原文地址：http://www.cnblogs.com/wwlw/p/7773734.html