第三章JavaScript操作BOM对象

Posted 2020-10-11 别动我的猫

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第三章JavaScript操作BOM对象相关的知识，希望对你有一定的参考价值。

第一章 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();