sponsored links

JavaScript操作BOM对象——笔记

BOM的作用
浏览器对象模型(BOM)是JavaScript的组成之一,它提供独立于内容与浏览器窗口进行交互的对象,使用浏览器对象模型可以实现与HTML的交互。它的作用是将相关元素组织包装起来提供给程序设计人员使用,从而降低开发人员的劳动量,提高设计Web页面的能力,BOM是一个分层结构
JavaScript操作BOM对象——笔记


Window对象
window对象是整个BOM的核心,在浏览器打开网页后,首先看到的是浏览器窗口,即顶层的Window对象;其次是网页文档内容,即document(文档)。它的内容包括一些超链接(link)表单、(from)、锚(anchor)等,表单由文本框(text)、单选按钮(radio)、按钮(button)等,表单元素组成。在浏览器中对象结构中,除了document对象外,window对象之下还有两个对象:地址对象(location)和历史对象(history),它们对应于浏览器地址栏和前进/后退按钮。
BOM通常可以实现如下功能:
  • 弹出新的浏览器窗口
  • 移动、关闭浏览器窗口及调整窗口的大小
  • 在浏览器窗口中实现页面的前进、后退功能

常用的属性
window对象的常用属性
名称
说明
history
有关客户访问过的URL的信息
location
有关当前URL的信息
screen
只读属性,包含有关客户端显示屏幕的信息
语法:window.属性名=“属性值”;

常用的方法
window对象的常用方法
名称
说明
prompt()
显示提示用户输入的对话框
alert()
显示一个带有提示信息和一个“确定”按钮的警示
对话框
confirm()
显示一个带有提示信息、“确定”和“取消”按钮的
对话框
close()
关闭浏览器窗口
open()
打开一个新的浏览器窗口,加载给定URL所指定
的文档
setTimeout()
在指定的毫秒数后调用函数或计算表达式
 
按照指定的周期(以毫秒计)来调用函数或表达
语法:window.方法名();
window对象是全局对象,所以在使用window对象的属性和方法时,window可以省略
1、confirm()
语法:window.confirm("对话框中显示得纯文本");
在用户单击“确定”和取消按钮关闭对话框之前,它将阻止用户对浏览器的所有操作,即不会执行下一条语句,点击“确定”按钮confirm()返回True,点击“取消”按钮confirm()返回false
2、prompt()、alter()和confirm()之间的区别
  • alter()只有一个参数,仅显示警告对话框的消息,无返回值,不能对脚本产生任何改变
  • prompt()有两个参数,是输入对话框,用来提示用户输入一些信息,单击“取消”按钮则返回null,单击“确定”按钮则返回用户输入的值,常用于收集用户关于特定问题而反馈的信息
  • confirm()只有一个参数,是确认对话框,显示提示对话框的消息,点击“确定”按钮confirm()返回True,点击“取消”按钮confirm()返回false,因此与if-else语句搭配使用
3、close()
语法:widow.close();
用于关闭浏览器窗口
4、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
是否使用全屏模式显示浏览器,默认是yes

history对象
history对象的方法
名称
描述
back()
加载history对象列表中的前一个URL
forward()
加载history对象列表中的后一个URL
go()
加载history对象列表中的某个具体URL
  • back()方法会让浏览器加载前一个浏览过的文档,history.back()等效于浏览器中的“后退”按钮
  • forward()方法会让浏览器加载后一个浏览过的文档,history.forward()等效于浏览器中的“前进“按钮
  • go(n)方法中的n是一个具体的数字,当n>0时,当n>0时,装入历史列表中往前数的第n个页面;当n=0时,装入当前页面;当n<0时,装入历史列表中往后数的第n个页面

location对象
location对象提供当前页面的URL信息,并且可以重新装载当前页面或装入新页面
location对象的属性
名称
描述
host
设置或返回主机名和当前URL的端口号
hostname
设置或返回当前URL的主机名
href
设置返回完整的URL
location对象的方法
名称
描述
reload()
重新加载当前文档
replace()
用新的文档替换当前文档

document对象的常用属性
document对象的常用属性
属性
描述
referrer
返回载入当前文档的URL
URL
返回当前文档的URL
referrer语法:document.referrer
如果当前文档不是通过超链接访问的,则document.referrer的值为null
URL语法;document.URL
上网浏览某个页面时,由于不是由指定的页面进入的,因此系统将会提醒不能浏览本页面或者直接跳到其他页面,这样的功能实际上就是通过referrer属性来实现的

document对象的常用方法
document对象的常用方法
方法
描述
getElementById()
返回对拥有指定id的第一个对象的引用
getElementsByName()
返回带有指定名称对象的集合
getElementsByTagName()
返回带有指定标签签名的对象的集合
write()
向文档写文本、HTML表达式或JavaScript代码
  • getElementById()方法一般用于访问div、图片、表单元素、网页标签等,但要求访问对象的id是唯一的
  • getElementsByName()方法与getElementById()方法相似,但它访问的是具有name属性的元素,由于一个文档中得到name属性可能不唯一,因此getElementsByName()方法一般用于访问一组相同name属性的元素,如:具有相同name属性的单选按钮、复选框等
  • getElementsByTagName()方法是按标签来访问页面元素的,一般用于访问一组相同的元素,一组<input>、一组图片等

JavaScript内置对象
Date:用于操作日期和时间
Array:用于在单独的变量名中存储一系列的值
String:用于支持对字符串的处理
Math:使我们有能力执行常用的数学任务,它包含了若干个数字常量和函数
Date对象
语法:var 日期示例=new Date(参数);
日期示例是存储Date对象的变量。可以省略参数,如果没有参数,则表示当前日期和时间
参数是字符串格式”MM DD ,YYYY,hh:mm:ss“例如:
var tdate=new Date("July 15,2013,16:34:28");
Date对象常用的方法
方法
说明
getDate()
返回Date对象的一个月中的每一天,其值为1~31
getDay()
返回对象的星期中的每一天,其值为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()返回四位数的年份,getYear()返回二位或四位的年份,常用于获取年份getFullYear()
  • 获取星期几使用getDay(),0~6一次为周一至周天
  • 各部分时间表示范围:除号数(一月中的每一天)外,其他均从0开始计数
Math对象
Math对象提供了许多与数学相关的功能,它是JavaScript的一个全局对象,不需要创建,直接作为对象使用就可以调用其属性和方法
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.random();例如:0.1321414314
random()方法返回的随机数包括0,
不包含1

常用定时函数
1、setTimeout()
setTimeout()用于在指定的毫秒后调用函数或计算表达式
语法:setTimeout(”调用的函数名称“,等待的毫秒数)
2、setInterval()
setInterval()可按照指定周期(以毫秒记)来调用函数或计算表达式
语法:setInterval(“调用的函数名称”,周期性调用函数之间间隔的毫秒数)
3、clearTimeout()和clearInterval()
clearTimeout()函数用来清除由setTimeout()函数设置的定时器
语法:clearTimeout(setTimeout()返回的ID值)
clearInterval()函数用来清除由setInterval()函数设置的定时器
语法:clearInterval(setInterval()返回的ID值)
Tags: