JavaScript操作BOM对象

一、学习目的

会使用getElementById( )方法访问DOM元素

会使用getElementsByName( )方法访问DOM元素

会使用getElementsByTagName( )方法访问DOM元素

会使用定时函数和Date对象制作时钟特效

二、BOM（Browser Object Model）：浏览器对象模型

BOM提供了独立于内容的，可以与浏览器窗口进行交互的对象结构。

BOM可实现功能：

弹出新的浏览器窗口

移动、关闭浏览器窗口以及调整窗口的大小

页面的前进、后退

三、window对象

常用属性：

history：有关客户访问过的URL的信息

location：有关当前URL的信息

document：文档

window.属性名= "属性值"

history对象的常用方法：

back（）：加载 history 对象列表中的前一个URL

forward（）：加载 history 对象列表中的下一个URL

go（）：加载 history 对象列表中的某个具体URL

location对象：

常用属性：

host：设置或返回主机名和当前URL的端口号

hostname：设置或返回当前URL的主机名

href：设置或返回完整的URL

常用方法：

reload（）：重新加载当前文档

replace（）：用新的文档替换当前文档

<a href="javascript:location.href='flower.html'">查看鲜花详情</a> 

<a href="javascript:location.reload()">刷新本页</a>

<a href="javascript:history.back()">返回主页面</a>

wwindow对象

常用方法：

prompt（）：显示可提示用户输入的对话框

alert（）：显示带有一个提示信息和一个确定按钮的警示框

confirm（）：显示一个带有提示信息、确定和取消按钮的对话框

close（）：关闭浏览器窗口

open（）：打开一个新的浏览器窗口，加载给定 URL 所指定的文档

setTimeout（）：在指定的毫秒数后调用函数或计算表达式

setInterval（）：按照指定的周期（以毫秒计）来调用函数或表达式  1000毫秒=1秒

confirm（）、alert（）和prompt（）的区别：

alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变

prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息

confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用

open（）方法的属性：

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。处于全屏模式的窗口必须同时处于剧院模式

语法：window.open("弹出窗口的url","窗口名称","窗口特征”)

document对象的常用属性：

referrer：返回载入当前文档的URL   document.referrer

URL：返回当前的URL     document.URL

document对象的常用方法：

getElementById()：返回对拥有指定id的第一个对象的引用

getElementsByName()：返回带有指定名称的对象的集合

getElementsByTagName()：返回带有指定标签名的对象的集合

write()：向文档写文本、HTML表达式或JavaScript代码

在document中用

getelementsbyname

getelementsbyname尽管只有一个元素也要当成一组来看待，在后面加[i].

innerHTML： document.getElementById("book").innerHTML="现象级全球畅销书";

等号要是在左边则是获取节点里面的内容

等号要是在右边则是设置

innerHTML指的是节点中间的内容不包括节点。

innerText是只包括了节点里面的文本内容。

四、JavaScript内置对象

Array：用于在单独的变量名中存储一系列的值

String：用于支持对字符串的处理

Math：用于执行常用的数学任务，它包含了若干个数字常量和函数

Date：用于操作日期和时间

五、Date对象

语法：

var 日期对象=new Date(参数)

参数格式：MM  DD,YYYY,hh:mm:ss

示例：

var  today=new Date();   //返回当前日期和时间

var tdate=new Date("september 1,2013,14:58:12");

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 对象的年份，其值为4位数

getTime()：返回自某一时刻（1970年1月1日）以来的毫秒数

六、Math对象

ceil()：对数进行上舍入        

floor()：对数进行下舍入

round()：把数四舍五入为最接近的数

random()：返回0~1之间的随机数

七、定时函数

setTimeout（）  setTimeout("调用的函数",等待的毫秒数)

示例：var  myTime＝setTimeout("disptime() ", 1000 );

setInterval（）      setInterval("调用的函数",间隔的毫秒数)

示例：var  myTime＝setInterval("disptime() ", 1000 );

如果要多次调用，使用setInterval()或者让disptime()自身再次调用setTimeout()

八、清除函数

clearTimeout（）   clearTimeout(setTimeOut()返回的ID值)

示例：

var  myTime＝setTimeout("disptime() ", 1000 );

clearTimeout(myTime)；

clearInterval（）   clearInterval(setInterval()返回的ID值)

示例：

var  myTime＝setInterval("disptime() ", 1000 );

clearInterval(myTime)；

九、总结

        开始了解通过一些方法来获取到元素的位置，这样可以更好实现精准的设置。同时学的对象名，属性和方法也更多，可以实现的画面也更多。可以做个简单的小时钟特效等。总的来说，对于这一块的学习还是很感兴趣的。下面是知识点的总结。