JavaScript操作BOM对象
目录
一.windows对象
浏览器对象模型(BOM) 是Javascript 的组成之一，他提供了独立于内容与浏览器窗口进行交互的对象，是浏览器对象模型可以实现与HTML交互。他的作用是将相关的元素组织包装起来，提供给程序设计人员使用，从而降低开发人员的劳动量，提高设计Web页面的能力。
--BOM是一个分层结构
--使用BOM模式通常可以实现如下功能
1.弹出新的浏览器窗口
2.移动，关闭浏览器窗口及调整窗口的大小。
3.在浏览器窗口中实现页面的前进，后退功能
1.常用的属性
window对象的常用属性
| 名称 | 说明 |
| history | 有关客户访问过的URL的信息 |
| location | 有关当前URL的信息 |
| screen | 只读属性，包含有关客户端显示屏幕的信息 |
--在javascript中，window属性的语法格式
1.语法
window.属性名=“属性值”
2.使用：跳转到百度页面
window.location=“http://www.baidu.com”
2.常用的方法
window对象的常用方法
| 名称 | 说明 |
| prompt() | 显示一个可输入的对话框 |
| alert() | 显示一个带有提示信息和一个确定按钮的警示对话框 |
| confrim() | 显示一个带有提示信息，确认和取消的按钮的对话框 |
| close() | 关闭浏览器窗口 |
| open() | 打开一个新的浏览器窗口，加载指定URL的窗口 |
| setTime() | 在指定毫秒数后调用函数或者计算表达式 |
| setInterval() | 按照指定周期（以毫秒）来计算函数或者表达式 |
--在javascript中，window方法的语法格式
1.语法
window.方法名();
//window对象是全局对象，所以再调用方法和属性时 ,window可以省略
2.关闭浏览器方法
close();
3.弹出一个确认对话框
confrim(“对话框中显示的纯文本”)；
4.在页面弹出一个新的浏览器窗口
open("弹出窗口的URL","窗口名称","窗口特征");
--prompt()方法和alert()的用法，与confirm()方法的区别
1.alert()只有一个参数，仅显示警告对话框的消息，无返回值。
2.prompt()有两个参数，是输入对话框，用来提示用户输入一些信息，单击确认按钮则返回用户输入的值，单击取消则返回null.
3.confrim()只有一个参数，是确认对话框，显示提示对话框的消息，确认按钮和取消按钮。单击确认按钮返回true，单击取消按钮返回flase;
3.history对象和location对象
1.history对象
history对象提供用户最近浏览过的URL列表,但出于隐私方面的原因，history对象不在允许脚本访问已经访过多得实际URL，可以使用history对象提供的，逐个返回访问过的页面的方法.
--history()对象的方法
| 名称 | 描述 |
| black() | 加载history对象列表中的前一个URL |
| forward() | 加载history对象列表中的后一个URL |
| go() | 加载history对象列表中的某个具体的URL |
--black()方法让浏览器加载前一个浏览过的文档，等效于浏览器页面中的“前进”按钮。
--forward()方法让浏览器加载后一个浏览过的文档，等效于浏览器页面中的“后退”按钮。
--go(n)方法中的n是一个具体的数字，等效于浏览器页面中的“前进”或"后退"按钮。
2.location对象
location对象提供当前的URL信息，并且可以重新装载当前页面或者载入新页面，
--location()对象的属性
| 名称 | 描述 |
| host | 设置或返回主机名和当前URL的端口号 |
| hostname | 设置或者返回当前URL的主机名 |
| href | 设置或返回完整的URL |
--location()对象的方法
| 名称 | 描述 |
| reload() | 重新加载当前文档 （刷新） |
| replace() | 用新的文档替换当前文档 （跳转） |
1.实现刷新页面和跳转至查看鲜花详情页面
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>主页面</title>
<style type="text/css">
body{
margin: 0px auto;
text-align:center;
}
</style>
</head>
<body>
<img src="images/flow.jpg" alt="鲜花" /><br />
<a href=" javascript:location.replace('flower.html')" >查看鲜花详情</a>
<a href=" javascript:location.reload()" >刷新本页</a>
</body>
</html>4.document对象
document对象既是window对象的一部分，又代表整个HTML文档，可用来访问页面中的所有元素.
1.doucment对象的常用属性
| 属性 | 描述 |
| referrer | 返回载入当前文档的URL |
| URL | 返回当前文档的URL |
1.referrer的语法
document.referrer //当前文档如果不是通过超链接访问的，则返回值为null;
2.URL的语法
document.URL1.使用document.referrer属性获得链接进入本页的页面地址，判断是否从登录页面进入
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>领奖页面</title>
<style type="text/css">
body,h1{margin: 0;padding: 0;}
.prize{text-align: center;}
</style>
</head>
<body>
<div class="prize">
<img src="images/d1.jpg" alt="中奖" />
<h1><a href="praise.html" onclick="zhongjiang()">马上去领奖啦！</a></h1>
</div>
<script>
function zhongjiang(){
var reurl=document.referrer;
if(reurl=="" )
{
document.write("您不是从登录页面进入，五秒中后自动跳转登录页面");
setTimeout("location.href='login.html'",5000);
}else
{
document.write("恭喜您中了大奖")
}
}
</script>
</body>
</html>2.document对象的常用方法
| 方法 | 描述 |
| getIElementById() | 返回对拥有指定ID的第一个对象的引用 |
| getIElementByName() | 返回对带有指定名称的对象的引用 |
| getIElementByTagName() | 返回对带有指定标签名的对象的集合 |
| write() | 向文档写文本，HTML表达式或者JavaScript代码 |
--getIElementById() 方法一般用来访问DIv,图片，表单元素，网页标签等,但要求访问对象的id是唯一的。
--getIElementByName()方法与getIElementById()方法相似，但他访问的是具有name属性的元素，由于一个文档中的name属性不可能是唯一的，因此getIElementByName()访问的是具有相同name属性的元素，如具有相同的name属性的单选按钮，复选框。
--getIElementByTagName()方法是按照标签来访问页面元素的，一般用于访问一组相同的元素如一组<input>，一组的图片等。
1.document对象方法的使用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用document对象操作页面</title>
</head>
<body>
<div class="content">
<img src="images/book.jpg" alt="岛上书店"/>
<div class="r">
<div id="book">书名：岛上书店</div>
<input name="changeBook" value="换换名称" type="button" onclick="tihuan()"/><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><br>
<input name="b2" type="button" value="input内容" onclick="input()" />
<input name="b3" type="button" value="四季名称" onclick="sijiname()"/>
<input name="b4" type="button" value="清空页面内容" onclick="clears()" />
<p id="replace"></p>
</div>
</div>
<script>
//替换书名
function tihuan()
{
document.getElementById("book").innerHTML="书名:你好Low啊";
}
//输出input标签中的内容
function input()
{
var inputs=document.getElementsByTagName("input");
var p=document.getElementById("replace");
p.innerHTML=null;
for(var i=0;i<inputs.length;i++){
p.innerHTML+= inputs[i].value+"<br/>";
}
}
//输出属性名称为season的元素中的内容
function sijiname()
{
var inputs=document.getElementsByName("season");
var p=document.getElementById("replace");
p.innerHTML=null;
for(var i=0;i<inputs.length;i++){
p.innerHTML+= inputs[i].value+"<br/>";
}
}
//清除页面所有内容
function clears()
{
document.write("")
}
</script>
</body>
</html>--innerHTML是所有的HTML元素都有得属性，他是一个文字串，用来设置获取当前对象的开始标签和结束标签之间的HTML。
5.JavaScript内置对象
在Javascript中，系统的内置对象有Date对象，array对象，String对象和Math对象。
--Date：用于操作日期和时间。
--Array:用于在单独的变量名中储存一系列的值。
--String：用于支持对字符串的处理
--Math：使我们有能力执行常用的数学任务。
1.Date对象
1.语法
var 日期实例=new Date(参数);
--日期实例中储存Date对象的变量，可以省略参数
var time=new Date();
--参数的字符串格式“MM DD,YYYYY,hh:mm:ss” 表示日期和时间
var time =new Date("july 15,2013,16:34:"13);
--Date对象的常用方法
| 方法 | 说明 |
| getDate() | 返回Date对象的一个月中的每一天，其值为1~31 |
| getDay() | 返回Date对象的星期中的每一天，其值为0~6 |
| getHours() | 返回Date对象的小时数，其值为0~23 |
| getMinutes() | 返回Date对象的分钟数，其值为0~59 |
| getSeconds() | 返回Date对象的秒数，其值为0~59 |
| getMonth() | 返回Date对象的月份，其值为0~11 |
| getFullYear() | 返回Date对象的年份，其值为四位数 |
| getTime() | 返回自某一个时刻（1970年1月1日）以来的毫秒数 |
--getFullYear()返回四位数的年份,getlYear()返回二位或四位的年份，常用于获取年份getFullYear()；
--获取星期几使用getDay()；0表示周日，1表示周一，6表示周六。
--各部分时间表示的范围：除号数（一个月中的每一天）外，其他均从0开始计数。
2.Math对象
math对象提供了许多与数学相关的功能。
| 方法 | 说明 | 示例 |
| ceil() | 对数进行上舍入 | Math.ceil(25.5) 返回26 Math.ceil(-25.5) 返回-25 |
| floor() | 对数进行下舍入 | Math.floor(25.5) 返回25 Math.floor(-25.5) 返回-26 |
| round() | 把数四舍五入为最接近的数 | Math.round(25.5) 返回26 Math.round(-25.5) 返回-26 |
| random() | 返回0~1中的随机数 | Math.round() 列如0.1254545454 |
5.定时函数
1.常用定时函数
JavaScript中提供了两个定时函数SetTimeout()和setInterval()。
1.setTimeout()
1.语法（用于在指定的毫秒数后调用函数或者计算表达式）
setTimeout("调用函数名称",等待的毫秒数)
2.setInterval()
1.语法（可按照指定的周期来调用函数或者计算表达式）
setInterval("调用的函数名称","周期性调用函数之间间隔的毫秒数");3.clearTimeout()和clearInterval()
1.语法（用于清除两种定时函数设置的定时器）
clearTimeout(setTimeout()返回的ID值)
clearInterval(setInterval()返回的ID值)
上一篇： SpringMVC的学习总结（二）
下一篇： SpringMVC详解(二)