第二章 JavaScript操作BOM对象
BOM
概念:
浏览器对象模型(BrowserObject Model),提供了独立于内容的、可以与浏览器窗口进行互动的对象结构
分层结构
如图所示,其中history和location主要对应前进/后退按钮和浏览器地址栏
作用
弹出新的浏览器窗口
移动、关闭浏览器窗口及调整窗口的大小
浏览器窗口中实现前进、后退功能
window对象
常用属性
- history对象
有关用户访问过的URL信息
常用方法
history.back()
与在浏览器点击后退按钮相同
history.forward()
与在浏览器中点击按钮向前相同
history.go()
语法
history(n),n表示具体的某个数字,装载入历史表中的第n
个历史页
history.go(1):前进一页,等价于history.forward()
history.go(-1):前进一页,等价于history.back()
- location对象
当前访问的URL,通过修改location的值可以实现网页跳转
常见属性
host:设置或返回主机名和当前URL的端口号
hostname :设置或返回当前URL的主机名
href :设置或返回完整的URL
常用方法
reload():重新加载当前文档(刷新功能)
replace():用新的文档替换当前文档
replace(url路径),设置对应的替换页面路径
语法:window.location=属性值;或者window.location.href=属性值;
均可实现跳转
案例
对应为:host hostname href三个属性
- screen
只读属性,包含有关客户端显示屏幕的信息
screen.availWidth 属性返回访问者可用的屏幕的宽度,以像素计,减
去界面特性,比如窗口任务栏
screen.availHeight 属性返回访问者可用的屏幕的高度
screen.height 返回访问者屏幕的高度
screen.width 返回访问者屏幕的宽度
常用方法
prompt( )
显示可提示用户输入的对话框
alert( )
显示带有一个提示信息和一个确定按钮的警示框
confirm( )
显示一个带有提示信息、确定和取消按钮的对话框
在confirm弹出在对话框中,有一个确定和取消按钮,如果点击确定,则
返回true,反之则false
应用
var flag = confirm(“是否确定”);
再结合选择结构对flag值进行操作
close( )
关闭当前浏览器窗口
该方法只能由 window.open 方法打开的窗口的window对象来调用.如
果一个窗口不是由脚本打开的,调用该方法时,JavaScript控制台会出现下
面的错误: “不能使用脚本关闭一个不是由脚本打开的窗口”
open( )
打开一个新的浏览器窗口,加载给定 URL 所指定的文档
语法:window.open(url路径);
应用:var myPage = window.open(url路径);利用这种方式可以保留myPage ,对对应窗口进行操作
setTimeout( )
语法:setTimeout(“调用的函数名()”,等待的毫秒数)
在指定的毫秒数后调用函数或计算表达式
setInterval( )
语法:setInterval(“调用的函数名()”,周期性执行函数的秒数)W
按照指定的周期(以毫秒计)来调用函数或表达式
clearTimeout/clearInterval
清除由setTimeout/setInterval设置的定时器
语法
clearTimeout(setTimeout()返回的ID值)
clearInterval(setInterval()返回的ID值)
语法如下
案例1
var time = setTimeout(“look()”,1000);
window.clearTimeout(time);
document对象
常用属性
referrer
返回载入当前页面的URL,如果不是通过超链接访问,则其值为""
URL
返回当前页面的URL
常用方法
document.getElementById()
document.getElementByName()
由于name不唯一,因此一般用在具有相同name属性的单选按钮、复选
框等
document.getElementByTagName()
按标签获取页面元素,一般用于访问一组相同的元素,如一组
、一组图片等
案例
var inputArray = document.getElementByTagName(“input”);
此时获取到的是当前页面中所有input标签的集合
write() 写到文档输出
Date对象
声明
var now = new Date();
声明时,如果new Date()中没有参数,默认now为当前时间
如果new Date()中有参数,一般参数格式为
yyyy/MM/dd HH:mm:ss
yyyy-mm-dd HH:mm:ss
MM dd,yyyy,hh:mm:ss
如:var now = new Date(“2018/12/10 13:20:12”);
常用方法
getYear() 获取从1900年到当前年份之间的差距
getFullYear() 获取当前年份
getMonth() 获取当前的月份(由于本身是由数组进行存储,因此下标从0-
11,因此获取月份时要加1)
getDate() 获取当前的日期
getDay() 获取当前时间是周几(0表示周日,1-6分别对应周一到周六)
getHours() 获取当前小时数
getMinutes() 获取当前的分钟数
getSeconds() 获取当期的秒数
getMilliseconds() 获取当期的毫秒数
getTime( ) 返回自某一时刻(1970年1月1日)以来的毫秒数
上述的方法均为getXXX()方法,类似的还有setXXX()方法,用于设置对应的
日期参数,如 setMinutes()设置日期的分钟数
例子: var now = new Date(); now.getYear() 其他方法以此类推
格式化日期字符串
toDateString() 把Date对象的日期部分转换为字符串,并返回结果
toTimeString() 把Date对象的时间部分转换为字符串,并返回结果
toLocaleString() 把日期转换为本地格式的字符串
toLocaleDateString() 根据本地时间把Date对象的日期部分转换为字符串,
并返回结果
toLocaleTimeString() 根据本地时间把Date对象的时间部分转换为字符串,
并返回结果
Math对象
ceil():向上取整(取较大数)
25.5返回26 -25.5返回-25
floor():向下取整(取较小数)
25.5返回25 -25.5返回-26
round():四舍五入为最接近的数(取绝对值较大数)
25.5返回26 -25.5返回-26
random():返回0-1之间的随机数
随机整数公式:parseInt(Math.random()* (最大值-最小值+1)+最小值)
innerHTML属性
几乎所有的元素都有innerHTML属性
它是一个字符串,用来设置或获取位于对象起始和结束标签内的HTML
扩充
innerText、value、innerHTML的区别
innerText: 一般是指标签之间可显示文本
innerHTML:一般是指标签之间的所有内容
value:一般为标签的的属性值
案例
其中第一行获取的值为 :kk
其中第二行获取的值为 :kk
其中第三行获取的值为 :123