JavaScript操作BOM对象

最新推荐文章于 2024-03-29 18:32:33 发布

慵ノ懒

最新推荐文章于 2024-03-29 18:32:33 发布

阅读量151

点赞数

分类专栏：使用jQery快速高效的制作网页交互特效文章标签： javascript

本文链接：https://blog.csdn.net/NYLX9527/article/details/112877795

版权

使用jQery快速高效的制作网页交互特效专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一.windows对象

1.常用的属性

2.常用的方法

3.history对象和location对象

一.windows对象

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

--BOM是一个分层结构

--使用BOM模式通常可以实现如下功能

1.弹出新的浏览器窗口

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

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

1.常用的属性

window对象的常用属性

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

--在javascript中，window属性的语法格式

1.语法
window.属性名=“属性值”

2.使用：跳转到百度页面
window.location=“http://www.baidu.com”

2.常用的方法

window对象的常用方法

window对象的常用方法
名称	说明
prompt()	显示一个可输入的对话框
alert()	显示一个带有提示信息和一个确定按钮的警示对话框
confrim()	显示一个带有提示信息，确认和取消的按钮的对话框
close()	关闭浏览器窗口
open()	打开一个新的浏览器窗口，加载指定URL的窗口
setTime()	在指定毫秒数后调用函数或者计算表达式
setInterval()	按照指定周期（以毫秒）来计算函数或者表达式

--在javascript中，window方法的语法格式

1.语法 
    window.方法名();
    //window对象是全局对象，所以再调用方法和属性时 ,window可以省略

2.关闭浏览器方法
    close();

3.弹出一个确认对话框
    confrim(“对话框中显示的纯文本”)；

4.在页面弹出一个新的浏览器窗口
    open("弹出窗口的URL","窗口名称","窗口特征");

--prompt()方法和alert()的用法，与confirm()方法的区别

1.alert()只有一个参数，仅显示警告对话框的消息，无返回值。

2.prompt()有两个参数，是输入对话框，用来提示用户输入一些信息，单击确认按钮则返回用户输入的值，单击取消则返回null.

3.confrim()只有一个参数，是确认对话框，显示提示对话框的消息，确认按钮和取消按钮。单击确认按钮返回true，单击取消按钮返回flase;

3.history对象和location对象

1.history对象

history对象提供用户最近浏览过的URL列表,但出于隐私方面的原因，history对象不在允许脚本访问已经访过多得实际URL，可以使用history对象提供的，逐个返回访问过的页面的方法.

--history()对象的方法

history对象的方法
名称	描述
black()	加载history对象列表中的前一个URL
forward()	加载history对象列表中的后一个URL
go()	加载history对象列表中的某个具体的URL

--black()方法让浏览器加载前一个浏览过的文档，等效于浏览器页面中的“前进”按钮。

--forward()方法让浏览器加载后一个浏览过的文档，等效于浏览器页面中的“后退”按钮。

--go(n)方法中的n是一个具体的数字，等效于浏览器页面中的“前进”或"后退"按钮。

2.location对象

location对象提供当前的URL信息，并且可以重新装载当前页面或者载入新页面，

--location()对象的属性

location()对象的属性
名称	描述
host	设置或返回主机名和当前URL的端口号
hostname	设置或者返回当前URL的主机名
href	设置或返回完整的URL

--location()对象的方法

location()对象的方法
名称	描述
reload()	重新加载当前文档（刷新）
replace()	用新的文档替换当前文档（跳转）

1.实现刷新页面和跳转至查看鲜花详情页面
<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
<title>主页面</title>
<style type="text/css">
body{
	margin: 0px auto;
	text-align:center;
}
</style>
</head>
<body>
<img src="images/flow.jpg" alt="鲜花" /><br />
<a href=" javascript:location.replace('flower.html')" >查看鲜花详情</a>
<a href=" javascript:location.reload()" >刷新本页</a>
</body>
</html>

4.document对象

document对象既是window对象的一部分，又代表整个HTML文档，可用来访问页面中的所有元素.

1.doucment对象的常用属性

document对象的属性
属性	描述
referrer	返回载入当前文档的URL
URL	返回当前文档的URL

1.referrer的语法
    document.referrer //当前文档如果不是通过超链接访问的，则返回值为null;

2.URL的语法
    document.URL

1.使用document.referrer属性获得链接进入本页的页面地址，判断是否从登录页面进入
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>领奖页面</title>
    <style type="text/css">
        body,h1{margin: 0;padding: 0;}
        .prize{text-align: center;}
    </style>
</head>
<body>
<div class="prize">
    <img src="images/d1.jpg" alt="中奖" />
    <h1><a href="praise.html" onclick="zhongjiang()">马上去领奖啦！</a></h1>
</div>
<script>
    function zhongjiang(){
        var reurl=document.referrer;
        if(reurl=="" )
        {
            document.write("您不是从登录页面进入，五秒中后自动跳转登录页面");
            setTimeout("location.href='login.html'",5000);
        }else
        {
            document.write("恭喜您中了大奖")
        }
    }
</script>
</body>
</html>

2.document对象的常用方法

document对象的方法
方法	描述
getIElementById()	返回对拥有指定ID的第一个对象的引用
getIElementByName()	返回对带有指定名称的对象的引用
getIElementByTagName()	返回对带有指定标签名的对象的集合
write()	向文档写文本，HTML表达式或者JavaScript代码

--getIElementById() 方法一般用来访问DIv,图片，表单元素，网页标签等,但要求访问对象的id是唯一的。

--getIElementByName()方法与getIElementById()方法相似，但他访问的是具有name属性的元素，由于一个文档中的name属性不可能是唯一的，因此getIElementByName()访问的是具有相同name属性的元素，如具有相同的name属性的单选按钮，复选框。

--getIElementByTagName()方法是按照标签来访问页面元素的，一般用于访问一组相同的元素如一组<input>，一组的图片等。

1.document对象方法的使用
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用document对象操作页面</title>
</head>
<body>
<div class="content">
    <img src="images/book.jpg" alt="岛上书店"/>
    <div class="r">
        <div id="book">书名：岛上书店</div>
        <input name="changeBook" value="换换名称" type="button"  onclick="tihuan()"/><br>
        四季名称：
        <input name="season" type="text" value="春" />
        <input name="season" type="text" value="夏" />
        <input name="season" type="text" value="秋" />
        <input name="season" type="text" value="冬" /><br><br>
        <input name="b2" type="button" value="input内容" onclick="input()" />
        <input name="b3" type="button" value="四季名称" onclick="sijiname()"/>
        <input name="b4" type="button" value="清空页面内容" onclick="clears()"  />
        <p id="replace"></p>
    </div>
</div>
<script>
     //替换书名
    function tihuan()
    {
        document.getElementById("book").innerHTML="书名:你好Low啊";
    }
    //输出input标签中的内容
    function input()
    {
        var inputs=document.getElementsByTagName("input");
        var p=document.getElementById("replace");
        p.innerHTML=null;
        for(var i=0;i<inputs.length;i++){
            p.innerHTML+= inputs[i].value+"<br/>";
        }
    }
    //输出属性名称为season的元素中的内容
    function sijiname()
    {
        var inputs=document.getElementsByName("season");
        var p=document.getElementById("replace");
        p.innerHTML=null;
        for(var i=0;i<inputs.length;i++){
            p.innerHTML+= inputs[i].value+"<br/>";
        }
    }
    //清除页面所有内容
    function clears()
    {
        document.write("")
    }
</script>
</body>
</html>

--innerHTML是所有的HTML元素都有得属性，他是一个文字串，用来设置获取当前对象的开始标签和结束标签之间的HTML。

5.JavaScript内置对象

在Javascript中，系统的内置对象有Date对象，array对象，String对象和Math对象。

--Date：用于操作日期和时间。

--Array:用于在单独的变量名中储存一系列的值。

--String：用于支持对字符串的处理

--Math：使我们有能力执行常用的数学任务。

1.Date对象

1.语法
    var 日期实例=new Date(参数); 
--日期实例中储存Date对象的变量，可以省略参数
    var time=new Date();
--参数的字符串格式“MM DD,YYYYY,hh:mm:ss” 表示日期和时间
    var time =new Date("july 15,2013,16:34:"13);

--Date对象的常用方法

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对象的年份，其值为四位数
getTime()	返回自某一个时刻（1970年1月1日）以来的毫秒数

--getFullYear()返回四位数的年份,getlYear()返回二位或四位的年份，常用于获取年份getFullYear()；

--获取星期几使用getDay()；0表示周日，1表示周一，6表示周六。

--各部分时间表示的范围：除号数（一个月中的每一天）外，其他均从0开始计数。

2.Math对象

math对象提供了许多与数学相关的功能。

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.round() 列如0.1254545454

5.定时函数

1.常用定时函数

JavaScript中提供了两个定时函数SetTimeout()和setInterval()。

1.setTimeout()

1.语法（用于在指定的毫秒数后调用函数或者计算表达式）
    setTimeout("调用函数名称",等待的毫秒数)

2.setInterval()

1.语法（可按照指定的周期来调用函数或者计算表达式）
    setInterval("调用的函数名称","周期性调用函数之间间隔的毫秒数");

3.clearTimeout()和clearInterval()

1.语法（用于清除两种定时函数设置的定时器）
    clearTimeout(setTimeout()返回的ID值)
    clearInterval(setInterval()返回的ID值)

慵ノ懒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript操作BOM对象

目录一.windows对象1.常用的属性2.常用的方法3.history对象和location对象1.history对象2.location对象4.document对象1.doucment对象的常用属性2.document对象的常用方法5.JavaScript内置对象5.定时函数1.常用定时函数一.windows对象浏览器对象模型(BOM) 是Javascript 的组成之一，他提供了独立于内容与浏览器窗口进行交互的对象，是...
复制链接

扫一扫

专栏目录