JavaScript操作BOM对象、window对象、history对象、location对象、document对象、javascript内置对象、Date对象、Math对象、定时函数

《JavaScript操作BOM对象》
浏览器对象模型（BOM）
提供了独立于内容与浏览器窗口进行交互的对象，使用浏览器对象模型可以实现与HTML的交互。
如：常见的弹出窗口、前进后退等功能都是由浏览器对象控制的。
BOM是一个分层结构。
window
|
|—————————|————————|
history document location
|
|—————————|————————|
link form anchor
|
|——————|————|————————|————————|————|
button checkbox text … textarea radio select
一、window对象的基本用法
1.BOM值浏览器中的对象模型，Browser Object Model,说白了就是操作浏览器的对象
名称 说明
window 全局对象
history 有关客户访问过的URL的信息(访问过的历史记录)
location 有关当前URL的信息(地址信息)
screen 只读属性，包含有关客户端显示屏幕的信息

在JavaScript中，属性的语法格式如下：
	window.属性名=“属性值”
举例：window.location="http://www.baqn.cn"表示跳转到北大青鸟官网；
screen.height返回浏览器的屏幕的高度，单位是像素。

2.常用的方法
名称 说明
prompt() 显示可提示用户的对话框，可以填入信息
alert() 显示带有提示信息和一个“确定”按钮的警示对话框
confirm() 显示带有提示信息，“确定”和“取消”按钮的对话框
close() 关闭浏览器
open() 打开一个新的浏览器窗口，加载给定URL所指定的我能当
setTimeout() 在指定的毫秒数后调用函数或计算机表达式
setInterval() 按照指定的周期（以毫秒计）来调用函数或表达式

在JavaScript中，方法的使用格式如下：
window.方法名（）;

window对象是全局对象，在使用window对象的属性和方法时，window可以省略。
举例：之前直接使用的alert(),相当于window.alert().
（1）confirm()
在用户单击“确定”或“取消”按钮将对话框关闭之前，它将阻止用户对浏览器的所有操作。

prompt()、alert()与confrim()的差别：

1.alert()只有一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变。
2.prompt()有两个参数，是输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，
单击“确定"按钮则返回用户输入的值，常用来收集用户关于特定问题而反馈的信息。
3.confirm()只有一个参数，是确认对话框，显示提示对话框的消息、”确定“按钮和”取消“按钮，
单击”确定“返回true，单击”取消“返回false,因此常与if-else语句搭配使用。

（2）close()
语法格式： window.close();
（3）open()
在页面上弹出一个新的浏览器窗口，弹出窗口的语法格式如下：
window.open(“弹出窗口的URL”,“窗口名称”,“窗口特征”)
窗口的特征属性如下所示：

名称 说明
height、width 窗口文档显示区的高度、宽度，以像素计
left、top 窗口的x坐标、y坐标，以像素计
toolbar=yes |no|1|0 是否显示浏览器的工具栏，默认是yes
scrollbars=yes |no|1|0 是否显示滚动条，默认是yes
location=yes |no|1|0 是否显示地址栏，默认是yes
status=yes |no|1|0 是否添加状态栏，默认是yes
menubar=yes |no|1|0 是否显示菜单栏，默认是yes
resizable=yes |no|1|0 窗口是否可调节尺寸，默认是yes
titlebar=yes |no|1|0 是否显示标题栏，默认是yes
fullscreen=yes |no|1|0 是否使用全屏模式显示浏览器，默认是no

二、history对象
1.表示用户访问过的历史记录，只能控制，不能读取
2.常用的方法：
名称 描述
forward() 加载history对象列表中的后一个URL(前进)
back() 加载history对象列表中的前一个URL(后退）
go() 加载history对象列表中的某个具体URL(出发)

back()方法会让浏览器加载前一个浏览过的文档，
history.back()等效于浏览器中的“后退”按钮。
forward()方法会让浏览器加载后一个浏览过的文档，
history.forward()等效于浏览器中的“前进”按钮。
go(n)方法中的n是一个具体的数字，
当n>0时，载入历史列表中往前数的第n个页面；
当n=0时，载入当前页面；
当n<0时，载入历史列表中往后数的第n个页面。

三、location对象(location:定位,位置,地址)
1、地址栏对象，操作地址栏地址

2、location对象的属性
名称 描述
host 设置或返回主机名和当前URL的端口号
hostname设置或返回当前URL的主机名
href 设置或返回完整的URL

location对象常用的属性是href，
通过对此属性设置不同的地址，可以实现跳转功能。		

举例：
function 方法名(){
location.href=“http://www.baidu.com”;
}
3、location对象的方法：常用于跳转页面
名称 描述
reload() 重新加载当前文档(刷新)
replace() 用新的文档替换当前文档(不能再返回前一个页面)
举例：
/可返回之前的页面/
location.href=“http://www.baidu.com”;

    /*不能返回之前的页面*/
   /* location.replace("http://www.baidu.com");*/

四、document对象(document：文档)

1.document对象的常用属性
属性 描述
referrer 返回载入当前文档的URL，
URL 返回当前文档的URL

referrer的语法格式如下：
document.referrer
当前文档如果不是通过超链接访问的，则document.referrer的值为null.
URL的语法格式如下：
document.URL
2.操作元素的属性：
a、innerHTML：是一个字符串，获取当前对象的开始标签和结束标签之间的HTML。
b、value:获取value的值

3.document对象的常用方法
方法 描述
getElementById() 返回对拥有指定id的第一个对象的引用
getElementsByName() 返回带有指定名称的对象的集合
getElementsByTagName() 返回带有指定标签名的对象的集合
write() 向文档写文本，HTML表达式或JavaScript代码，
但原有的页面被覆盖，要小心使用

1.getElementById()方法一般用于访问div、图片、表单元素、网页标签等，但要求访问对象的id是唯一的。
2.getElementByName()方法访问的是具有name属性的元素，
由于一个文档中的name属性可能不一致，因此getElementByName()方法
一般用于访问一组具有相同name属性的元素，返回的是一个元素数组。
3.getElementsByTagName()方法是按标签来访问页面元素的，一般用于访问一组相同的元素。

举例：
< p>这是一个段落< /p>
< input type=“button” value="获取段落内容"“gogetElementsTagName()”/>
< p>这是第二个段落< /p>
< p>这是第三个段落< /p>
< input type=“button” value="获取body内容"“show()”/>< br/>
< input type=“button” value="你想要玩个小游戏吗？"“xiao()”/>< br/>
< input type=“button” value="你想要玩个大胆的游戏吗？"“youxi()”/>

< script type=“text/javascript”>
//getElementsByTagName()
function gogetElementsTagName(){
var el=document.getElementsByTagName(“p”);
//p的个数
// console.log(el.length);
for(var i=0;i var p=el[i];
console.log(p.innerHTML);
}
}
//获取body的内容
// getElementById().innerHTML
function show(){
console.log(document.getElementById(“bod”).innerHTML);
}
//改变内容
function xiao(){
var list=document.getElementsByTagName(“p”);
var cs=list[0];
cs.innerHTML=“你可真是一个小可爱！”;

}
//清空整个页面内容
function youxi(){
    document.getElementById("bod").innerHTML="";
}

< /script>

4.元素的name属性:
1.不能以数字开头
2.可以重复
3.如果名字一样，说明他们是一组元素来的
4.document.getElementsByName()可以获取这一组元素
5.只有表单元素才有name属性

五、JavaScript内置对象
Date:用于操作日期和时间。
Array:用于在单独的变量名中存储一系列的值。
String:用于支持对字符串的处理。
Math:执行常用的数学任务，包含了若干个数字常量和函数。

1.Date对象
语法格式：
var 日期实例=new Date(参数);
（1）日期实例是存储Date对象的变量。可以省略参数，如果没有参数，则表示当前日期和时间。
举例：
var today=new Date(); //将当前日期和时间存储在变量today中
（2）参数是字符串格式“MM DD,YYYY,HH:mm:ss”,表示日期和时间。
举例：
var tdate=new Date(“July 15,2013,16:34:28”);

Date对象的常用方法

方法		说明
getFullYear()返回Date对象的年份，其值为为四位数
getMonth()返回Date对象的月份，其值为0~11
getDate()	返回Date对象的一个月中的每一天，其值为1~31	
getHours()返回Date对象的小时数，其值为0~23
getMinutes()返回Date对象的分钟数，其值为0~59
getSeconds()返回Date对象的秒数，其值为0~59

getDay()	返回Date对象的星期中的每一天，其值为0~6	
getTime()	返回自某一时刻（1970年1月1日）以来的毫秒数

（1）getFullYear()返回四位数的年份，getYear()返回两位或四位数的年份
（2）获取星期几使用getDay():0表示周日，1表示周一，6表示周六
（3）各部分时间表示的范围：除天数外，其他均从0开始计数。例如：月份0~11，0表示1月份，11表示12月份

2.Math对象
是JavaScript的一个全局对象，不需要创建，直接作为对象使用就可以调用其属性和方法。
常用的方法
方法 说明 示例
round() 四舍五入为最接近的数 Math.round(25.5)返回26；Math.round(-25.5)返回-26
random() 返回0~1中的随机数 Math.random();(包括0但不包括1，且都是小数）
ceil() 对数字进行上舍入 Math.ceil(25.5)；返回26 ； Math.ceil(-25.5)返回-25
floor() 对数字进行下舍入 Math.floor(25.5)返回25：Math.floor(-25.5)返回-26

四舍五入函数toFixed(n)，参数n表示保留小数的位置。
var total=2.15678; total.toFixed(2)的返回值为2.16

六、定时函数
（1）setTimeout()
用于在指定的毫秒后调用函数或计算表达式。
语法格式：
setTimeout(“调用的函数名称”，等待的毫秒数);
1秒=1000毫秒

setTimeout()只执行一次函数，如果要多次调用函数，
则需要使用setInterval()或者让被调用的函数再次调用setTimeout()。

（2）setInterval()
（Interval:时间间隔）
可按照指定的周期（以毫秒计）来调用函数或表达式。
周期循环调用的定时器函数，会一直调用
语法格式：
setIntval(“调用的函数名称”，“周期性调用函数之间间隔的毫秒数”)

setIntervarl()会不停地调用函数，直到窗口被关闭或被其他方法强制停止。

（3）clearTimeout()和clearInterval()
clearTimeout()函数用来清除由setTimeout()函数设置的定时器。
语法格式：
clearTimeout(setTimeout()返回的值);

clearInterval()函数用来清除由setInterval()函数设置的定时器。

语法格式：
clearInterval(setInterval()返回的值);
举例：
< body>
< h1 id=“d1”>10< /h1>
< /body>
< /html>
< script type=“text/javascript”>
function dostart(){
var hs=document.getElementById(“d1”)
hs.innerHTML=hs.innerHTML-1;
if(mm==0){
clearInterval(dostart());
}
}
var mm=setInterval(“dostart()”,1000);
< /script>

在取得标签内容的时候，innerHTML是必不可少的，
首先要使用document.getElementById取得标签的引用；
然后用标签.innerHTML取得标签的内容（hs.innerHTML)
之后用标签的内容逐次递减（hs.innerHTML=hs.innerHTML-)
使用setInterval()间隔1秒调用上面的方法
随后进行if判断，==0时停止调用方法，clearInterval(方法名返回的值)