JavaScript操作BOM对象

window对象

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

在这里插入图片描述
使用BOM通常可实现如下功能:

  • 弹出新的浏览器窗口
  • 移动,关闭浏览器窗口及调整窗口大小
  • 在浏览器窗口实现页面的前进,后退功能

常用的属性

window对象的常用属性

名称说明
history有关客户访问过的URL的信息
location有关当前URL的信息
screen只读属性,包含有关客户端显示屏幕的信息

在JavaScript中,属性的语法格式如下:

window.属性名="属性值";

常用的方法

window对象的常用方法

在这里插入图片描述
在JavaScript中,方法的使用格式如下:

window.方法名();

window对象是全局对象,所以在使用window对象的属性和方法时,window可以省略。
confirm()
confirm()将弹出一个确认对话框,语法格式如下:

window.confirm("对话框中显示的纯文本");

在confirm() 弹出的确认对话框中,有一条提示信息,一个"确认"按钮和一个"取消"按钮。如果用户单击"确认"按钮,则confirm() 返回true;如果单击"取消"按钮,则confirm() 返回false。
prompt() 方法和alert() 方法的用法与confirm() 方法比较相似,虽然他们都是在页面弹出对话框,但作用却不相同。

  • alert() 只有一个参数,仅显示警告对话框的消息,无返回值,不能对脚本产生任何改变
  • prompt() 有两个参数,是输入对话框,用来提示用户输入一些信息,单击"取消"按钮则返回null,单击"确定"按钮则返回用户输入的值,常用于收集用户关于特定问题而反馈的信息
  • confirm() 只有一个参数,是确认对话框,显示提示对话框的消息,"确认"按钮和"取消"按钮,单击"确定"按钮返回true,单击"取消"按钮返回false,因此与if-else语句搭配使用
    close()
    close()方法用于关闭浏览器窗口,语法格式如下:
window.close();

open()
在页面弹出一个新的浏览器窗口,弹出窗口的语法格式如下:

window.open("弹出窗口的url","窗口名称","窗口特征");

history

history对象提供用户最近浏览过的URL列表。
histroy对象的方法
在这里插入图片描述

location对象

在这里插入图片描述

document对象

document对象既是window对象的一部分,又代表了整个HTML文档,可用来访问页面中的所有元素。所以在使用document对象时,除了要适应于各浏览器外,也要符合W3C(万维网联盟) 的标准。
document对象的常用属性

属性描述
referrer返回时载入当前文档的URL
URL返回当前文档的URL

referrer的语法格式如下:

document.referrer

当前文档如果不是通过超链接访问的,则document.referrer的值为null

URL的语法格式如下:

document.URL

在这里插入图片描述

  • getElementById()方法一般用于访问div,图片,表单元素,网页标签元素,但要求访问对象的id时唯一
  • getElementsByName()方法与getElementById()方法相似,但它访问的是具有name属性的元素,由于一个文档的name属性可能不唯一,因此getElementByName()方法一般用于访问一组相同name属性的元素,如具有相同name属性的单选按钮,复选框等
  • getElementByTagName()方法是按标签来访问页面元素的,一般用于访问一组相同的元素,如一组,一组照片等

JavaScript内置对象

在JavaScript中,系统的内置对象有Data对象,Array对象,String对象和Math对象等

  • Data: 用于操作日期和时间
  • Array: 用于在单独的变量名中存储一系列的值
  • String : 用于支持对字符串的处理
  • Math: 使我们有能力执行常用的教学任务,它包含了若干个数字常量和函数
Data对象

语法

var 日期实例=new Data(参数);

Data对象的常用方法
在这里插入图片描述

  • getFullYear() 返回四位数的年份,getYear() 返回二位或四位的年份,常用于获取年份getFullYear()
  • 获取星期几使用getDay() :0表示周日,1表示周一,6表示周六
  • 各部分时间表示的范围:除号外(一个月中的每一天)外,其他均从0开始计数。例如月份0-11,0表示一月份,11表示12月份

Math对象

Math对象提供了许多与教学相关的功能,它是JavaScript的一个全局对象,不需要创建,直接作为对象使用就可以调用其属性和方法。
在这里插入图片描述

定时函数

常用定时函数
JavaScript中提供两个定时函数setTimeout()和setInterval()。此外还提供了用于清除定时器的两个函数clearTimeout()和clearInterval()
1. setTimeout()

setTimeout()用于在指定毫秒后调用函数或计算表达式,语法格式如下:

setTimeout("调用的函数名称",等待的毫秒数);

2.setInterval()
setInterval()可按照指定的周期(以毫秒计)来调用函数或计算表达式,语法格式如下:

setInterval("调用的函数名称",周期性调用函数之间间隔的毫秒数);

3.clearTimeout()和clearInterval()

clearTimeout()函数用来清除由setTimeout()函数设置的定时器,语法格式如下:

clearTimeout(setTimeout()返回的id值);

clearInterval()函数用来清除由setInterval()函数设置的定时器,语法格式如下:

clearInterval(setInterval()返回的id值);

总结
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值