第三章 JavaScript操作BOM对象

2022-11-10 11:23:24

第三章 JavaScript操作BOM对象

一.window对象

浏览器对象模型（BOM）是javascript的组成之一，它提供了独立与浏览器窗口进行交换的对象，使用浏览器对象模型可以实现与HTML的交互。

他的作用是将相关的元素组织包装起来，提供给程序设计人员使用，从而降低开发人员的劳动量，提高设计Web页面的能力。

BOM是一个分层结构：

Window对象是整个BOM的核心，在浏览器中打开网页后，首先看到是浏览器窗口，即顶层的window对象；其次是网页内容，即document(文档)。

Window对象也称为浏览器对象。当浏览器打开HTML文档时，通常会创建一个window对象，如果文档定义了一个或多个框架，浏览器将为原始文档创建一个window对象，同时为每个框架另外创建一个window对象。

1. BOM的作用

1）.弹出的浏览器窗口。

2）.移动、关闭浏览器窗口及调整窗口的大小。

3）.在浏览器窗口中实现页面的前进、后退功能。

2.window常用的属性

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

语法： windoe.属性名=”属性值”；

例：window.location=”http//www.baidu.com”,表示跳转到百度的官方主页。

screen.height返回显示浏览器的屏幕的高度，单位为像素。

3.window常用的方法

名称	说明
prompt()	显示一个可提示并且用户可以输入的对话框，取消返回null,确定返回用户输入的值
alert()	显示一个带有提示信息和一个“确定”按钮的警示对话框,无返回值
confrim()	显示一个带有提示信息、“确定”和“取消”按钮的对话框，返回true或false
colse()	关闭浏览器窗口
open()	打开一个新的浏览器窗口，加载给定的URL所指定的稳定
setTimeout()	在指定的毫秒数后调用函数或计算表达式
setInterval()	按照指定的周期（单位毫秒）来调用函数或表达式

弹出窗口语法：

Window.open(“弹出窗口的URL”,”窗口的名称”,”窗口特征”);

1. 窗口的特征属性

名称	说明
height、width	窗口文档显示区的高度、宽度、单位是像素
left、top	窗口的x坐标、y坐标，单位是像素
toolbar=yes\|no\|1\|0	是否显示浏览器的工具栏，默认是yes
scrollbars=yes\|no\|1\|0	是否显示滚动条，默认是yes
loaction= 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对象和location对象

1. history对象

history对象提供用户最近浏览过的URL列表，即浏览历史。出于隐私方面的考虑，history对象不再允许脚本访问已经访问过的实际URL

History对象的方法
名称	描述
back()	加载history对象列表中的前一个URL
forward()	加载history对象列表中的后一个URL
go()	加载history对象列表中的某个位置的URL,参数为正负整数

go(n)方法中的n是一个具体的数字，当n>0时，进入历史列表中前进的第几个页面。

当n<0时，进入历史列表中后退的第几个页面。

A） history.go(1)代表前进一页，等价于forward()方法。

B） History.go(-1)代表后退一页，等价于back()方法。

2. location对象

laction对象提供当前页面的URL信息，并且可以重新装载当前页面（刷新）或装入新页面。

Location对象的属性
名称	描述
Host	设置或返回主机名和当前URL的端口号
Hostname	设置或返回当前URL的主机名
href	设置或返回完整的URL
loaction对象的方法
reload()	重新加载(刷新)当前文档
replace()	用新的文档替换当前文档

例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>主页面</title>
</head>
<body>
    <img src="flow.jpg" alt="鲜花"/><br/>
    
    <a href="javascript:location.href='flower.html'">查看鲜花详情</a>
    <a href="javascript:location.reload()">刷新本页</a>
</body>
</html>

一.document对象

document对象即是window对象的一部分，又代表了整个HTML文档，可以用来访问页面中的所有元素。所以在使用document对象时，除了要适用于各个浏览器外，也要符合W3C的标准。

Document对象的常用属性
referrer	返回当前文档的URL
URL	返回当前文档的URL

1.referrer的语法格式如下：

document.referrer;

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

例：通过跳转地址判断用户是否从指定的页面登录的。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script type="text/javascript">
    var preUrl=document.referer;//载入跳转到当前文档的地址
    if(preUrl==""){
        document.write("<h2>您不是从领奖的登录页面进入，五秒后将自动跳入到领奖页面</h2>")
        setTimeout("location.href='login.html'",3000);//使用setTimeout延迟5秒后跳转到领奖页面的登录页面
    }else{
        document.write("<h2>大奖赶快拿！笔记本！数码相机！</h2>")
    }
</script>
</body>
</html>

2.URL的语法：

document.URL;

Document对象的常用方法
方法	描述
getElementByID()	返回对拥有指定id的第一个对象的引用
getElementsByName()	返回带有指定名称的对象的集合
getElementsByTagName()	返回指定带有表签名的对象的集合
write()	向文档写入文本，HTML表达式或JavaScript代码

二.javascript的内置对象

在javaScript中，系统的内置对象有Date对象、Array对象、String对象和Math对象等。

A） Date对象：用于操作日期和事件。

B） Array对象：用于在单独的变量名中存储一系列的值。

C） String对象：用于支持对字符串的处理。

D） Math对象：执行常用的数学任务，它包含了若干个数字常量和函数。

1.Date对象

语法：var 日期实例=new Date(参数)；

例：var today=new Date(); //将当前的时间存储在变量today中

var tdate=new
Date(“July 15,2013,16:10: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日）以来的毫秒数

例：显示时间

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>时钟特效</title>

</head>

<body>

    <div id="myclock"></div>

    <script type="text/javascript">

      function disptime(){

          var today=new Date();//获得当前的时间

          var hh=today.getHours();

          var mm=today.getMinutes();

          var ss=today.getSeconds();

          //设置div的内容为当前时间

          document.getElementById("myclock").innerHTML="现在是："+hh+":"+mm+":"+ss;

      }

        disptime();

    </script>

</body>

</html>

2.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();

三.定时函数

JavaScript中提供了两个定时函数setTimeout()和setInterval().

此外，还提供了用于清除定时器的两个函数clearTimeout()和clearInterval()。

1. setTimeout

setTimeout()用于在指定的毫秒后调用函数或计算表达式，语法：

setTimeout(“调用的函数名称”，等待的毫秒数)；

2. setInterval

按照指定的周期（单位毫秒）来调用函数或表达式。语法：

setInterval(“调用的函数名称”,周期性调用函数之间间隔的毫秒数)；

setInterval()会不停的调用函数，知道窗口关闭或被其他方法强制停止。

码农公寓

第三章 JavaScript操作BOM对象

一.window对象

1. BOM的作用

2.window常用的属性

3.window常用的方法

1. 窗口的特征属性

二.history对象和location对象

1. history对象

2. location对象

一.document对象

二.javascript的内置对象

1.Date对象

2.Math对象

三.定时函数

1. setTimeout

2. setInterval

相关文章