JavaScript中的BOM对象介绍

BOM(浏览器对象模型),它可以对浏览器窗口进行访问和操作,使用BOM,我们可以移动窗口、改变状态中的文本及执行其他与页面内容不直接相关的动作。

一.Window对象

1、简单说明

所有的浏览器都支持window对象;

从概念上来讲,一个HTML文档对应一个window对象;

从功能上来说,它可以控制浏览器的窗口;

从使用上讲,window对象不需要创建对象,直接使用即可。

2、window对象方法

2.1、alert():页面弹框提醒

 var s =window.alert("hi");      //返回结果为undefined,即无返回值
    console.log('s='+s);

2.2.confirm():页面弹框让进行选择,返回值为布尔值(选择'确认",则返回true;选择'取消'返回false)

 var res= window.confirm("this is a person ?")    
 console.log('res='+res);

2.3.prompt():页面弹框让用户进行输入,点击'确定'后返回值为用户输入的字符串值,点击'取消'后,返回值为null

 var  name = window.prompt("pelase input your name:");
    console.log('name = '+name);

注意:window对应为全局对象(全局变量、内置对象),所以在使用过程中可以不带'window.'而直接使用window的所有方法;例如:

var  age = prompt("pelase input your age:");
    console.log('age = '+age);

2.4.open(url)打开一个新的浏览器窗口或者查找一个一命名的窗口

var s = open("http://www.baidu.com");
   console.log('s='+s);

2.5.close()关闭浏览器窗口

close();

2.6.setInterval(函数名(不能带括号,不能带参数),循环定时器,它是按照指定的周期(单位:毫秒)循环反复地来调用函数或者计算表达式,即:每隔多长时间执行一次函数,若没有clearInterval来处理则永远不会停止,永久执行。

例1(在网页上每隔一秒显示一次时间):

setInterval(show,1000)
function show(){
var time = new Date();
var showtime = time.toLocaleTimeString();
    document.write("show time:"+showtime+"<br>");
}

例2(页面上点击输入框立即显示当前时间,并每隔1秒中刷新一次时间;点击’停止’按钮则停止刷新页面时间):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #showtime{
            width: 200px;
            height: 50px;
        }
    </style>
</head>
<body>
<script>
    var lock;
    //定义全局变量(定时器名称)方便后面的clearInterval()函数使用
    function begin() {
        '点击输入框就在页面上显示当前时间并每秒钟刷新一次--定时器功能'
        if(lock==undefined){
            showtime(); 
            //一开始点击就显示时间(否则会等待1S后才开始显示)
            lock = setInterval(showtime,1000); 
            //生成一个定时器对象
        }
    }
    function showtime() {
        '页面上显示当前时间'
        var time = new Date();
        var nowtime = time.toLocaleString();       
        // 按字符串格式显示时间
        var ele = document.getElementById('showtime');      
        // 得到输入框的元素
        ele.value = nowtime;    
        //将当前时间赋值给输入框,使其在页面上显示
    }
    function end() {
        '点击停止则停止刷新页面时间
        clearInterval(lock);
        lock = undefined;    
        <!--重新给定时器赋值,否则再次点击输入框则不再刷新页面时间
        (因为,在前面的begin函数中已经给lock赋值了,此时lock不再是undefined了,
        所以此时必须要重新给lock赋值undefined)-->
    }
</script>
<p><input type="text" id="showtime" onclick="begin()"></p>
<button onclick="end()">停止</button>
</body>
</html>

2.7.clearInterva(定时器名称):取消由setInterval()设置的timeout
clearInterval(定时器名称) 注:其中定时器名称是由setInterval()生成的对象并赋值的,它是和setInetrva()结合使用的;例如:

var lock;
//定义全局变量(定时器名称)方便后面的clearInterval()函数使用
function begin() {
    '点击输入框就在页面上显示当前时间并每秒钟刷新一次--定时器功能'
    if(lock==undefined){
        showtime(); 
        //一开始点击就显示时间(否则会等待1S后才开始显示)
        lock = setInterval(showtime,1000); 
        //生成一个定时器对象
    }
}
clearInterval(lock);

2.8.setTimeout(函数名(不带括号,不能带参数),等待时间):在指定的毫秒时间后调用函数或计算表达式,即:按照设置的等待时间执行一次函数。(注意:与setInterval的区别是:setInterval是循环永久的执行函数,而setTimeout是只执行一次函数)
setTimeout(函数名(不带括号,不能带参数),等待时间),例如:

<script>
    var  showfun = setTimeout(show,3000)    //等待3秒后弹框
    function show() {
        alert("this is a window's alter");
    }
</script>

2.9.clearTimeout(任务器名称):取消由setTimeout()设置的timeout
clearTimeout(任务器名称) 任务器是由setTimeout()函数生成的对象,它是与setTimeout()结合使用的。例如:

<script>
    var  showfun = setTimeout(show,3000)    //等待3秒后弹框
    function show() {
        alert("this is a window's alter");
    }
    clearTimeout(showfun);
</script>

3、window对象的history子对象

history对象包含用户在浏览器窗口中访问过的URL;

history对象是window对象的一部分,可以通过window.history属性对其进行访问。

history对象包含的属性方法有:

3.1 back() 加载history列表的前一个URL页面;

3.2 forward() 加载history列表中的该页面之后的一个URL页面;

3.3 go(1或-1) 加载history列表中的具体某一个页面。

history.go(1) = history.forward()

history.go(-1) = history.back()

代码实例:

js_history1.html文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js_history1</title>
</head>
<body>
    <!--通过a标签超链接的方式连接到js_history1.html页面-->
    <p><a href="js_history2.html">a:ToHistory2.html</a></p>
    <p onclick="history.forward()"><u>forward:Tohistory1.html</u></p>
    <p>这是html1页面</p>
</body>
</html>

js_history2.html文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js_history2</title>
</head>
<body>
    <!--通过ahistory.back()的方法连接到js_history2.html页面-->
    <p onclick="history.back()"><u>Tohistory1.html</u></p>
    <p onclick="history.go(-1)"><i>点击它也可</i><u>Tohistory1.html</u></p>
    <p>这是html2页面</p>
</body>
</html>

4、window对象的location子对象

location对象包含有关当前URL的信息;

location对象是window对象的一部分,可通过window。Location属性来进行访问。

location对象的方法

1、location.assign(url) 链接到指定的url页面;

2、location.reload() 刷新页面

3、location.replace(newurl)

实例代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>location演示</title>
</head>
<body>
<script>
</script>
<p>location.reload()方法演示</p>
<!--通过 location.assign(url)连接到指定的URL页面-->
<!--<p><button onclick="location.assign('http://www.baidu.com')">
assign:连接到百度首页</button></p>-->
<!--通过location.reload()方法重新加载该页面-->
<P><button onclick="location.reload()">刷新</button></P>
<!--通过location.replace(newurl)方法连接到重新指定的url页面-->
<button onclick="location.replace
('http://www.baidu.com')">replace:连接到百度首页</button>
</body>
</html>

注意:location.assign(url)和location.replace(newurl)
的区别:assign()方法可以进行页面前进和后退操作而replace()方法不可以,replace()方法是重新打开一个全新的页面。

本文来自JavaScript教程栏目。

以上就是JavaScript中的BOM对象介绍的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » JavaScript 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

1/1