JS基础(一):BOM对象

发布于 2019-06-13  37 次阅读


BOM

解释: Browser Object Model,浏览器对象模型

概念: 将浏览器的各个组成部分封装为对象

特点: BOM对象不能自己创建,当文档加载进内存,浏览器自动创建。

作用: 使JS能与浏览器对话

组成: Window(窗口对象)、Location(地址栏对象)、History(历史记录对象)、Navigator(浏览器对象)、Screen(显示器屏幕)

ⅰwindow

解释:窗口(视图)对象,即地址栏下方的区域

使用方式: window.方法名();

注意:window可以省略(由于以前频繁的调用太麻烦,所以省略!)

常用的方法

⒈与弹出有关的方法
1.1 alert()--警告消息框
特点: 显示带有一段消息和一个确认按钮的警告框。

window.alert("我是警告弹框");

1.2 confirm()--确认消息框
特点:显示带有一段消息以及确认按钮和取消按钮的对话框。

返回值:boolean类型的返回值

简单应用:用户要执行某个操作(给予提示,让其重新确认,以防误点) ,例如:关闭页面时,给予其提示。

function disp_confirm() {
    var r = confirm("Press a button");//注意返回值类型(用户通过按钮来选择的)
    if (r == true) {
        document.write("You pressed OK!")
    } else {
        document.write("You pressed Cancel!")
    }
}
disp_confirm();//调用函数

1.3 prompt()--提示消息框
特点:显示可提示用户输入的对话框

参数:参数1是提示,参数2是默认的输入内容(可以不写)

var  text=window.prompt("请输入收货地址","陕西西安咸阳");    
document.write(typeof text);//string类型

⒉与定时器有关的方法(执行一次和循环执行)
2.1 setInterval()
参数:参数1是调用的的函数;参数2是延时的周期(多少秒之后执行)

特点:循环执行

说明:clearInterval()取消由 setInterval()设置的timeout

应用:动态显示时钟

<body>
    <span id="time" style="color:blue"></span>
</body>
<script type="text/javascript">
    function showtime() {
        var date = new Date();
        var datetime = date.toLocaleString(); //获取时间的字符串形式
        //在指定的位置显示,所以要获取标签对象(DOM),通过id获取
        var time = document.getElementById("time");
        //要注意:如果在块在span标签之前,由于加载顺序,尚未加载,获取的是null值

        time.innerHTML = datetime;//给此标签之间设置时间(内容);注意"+="是追加,否则是覆盖
    }
    window.setInterval("showtime()", 1000);
</script>

详细用法参考文章

**2.2 setTimeout() **
说明:在指定的毫秒数后调用函数或计算表达式

特点:只执行一次

说明:clearTimeout() 取消由 setTimeout() 方法设置的 timeout

定时器理解:理解为执行一个任务

应用:向屏幕中输入内容,执行三次结束

<script type="text/javascript">
    function add() {
    document.write("哈喽!");
}
var i = 1;
while (i <= 3) {
    window.setTimeout("add()",2000);
    i++;
}
document.write("hello kitty");
//疑问:为什么是hello kitty先输出屏幕(不是应该最后输出吗?),然后执行的三次哈喽,覆盖掉原内容!---
</script>

补充:每个定时器开启的时候(set),都有一个id,关闭定时器是针对此id的定时器进行关闭的

⒊与打开关闭有关的方法
3.1 open()
说明:打开一个新的浏览器窗口或查找一个已命名的窗口

参数:打开目标的URL

返回值:返回新打开窗口的window引用(注意)

特点:打开了两个窗口

var newWindwo=window.open("http://www.baidu.com");
document.write(newWindwo);//[object Window]
document.write(this==newWindwo);//看是否是同一个窗口对象

3.2 close()
说明:关闭浏览器窗口

特点:谁调用我,我关谁

常用属性
作用:获取其他对象的属性
history :对 History 对象的只读引用(获取历史记录对象)
location :用于窗口或框架的 Location 对象(地址栏对象) 
Navigator: 对 Navigator 对象的只读引用()
Screen :对 Screen 对象的只读引用(屏幕对象)
document:对Document对象的只读引用(重点)

ⅱ其它对象

Location:地址栏对象

获取方式:可以用window对象中的属性获取(见名知意)

var locat=window.location;
document.write(typeof locat);//object
document.write(locat.Location);//未定义(说明地址栏没有内容,暂时获取不到!)
locat.href="http://www.baidu.com";//通过地址栏对象,给地址栏赋值(打开的窗口会覆盖原来的窗口!)

属性:href---设置或获取当前的URL

方法:relod()--重新加载当前的文档对象

History:历史记录对象

获取方式:可以用window对象中的属性获取

方法:forward():等效前进的按钮

back():下面一行代码执行的操作与单击后退按钮执行的操作一样

go(参数):负数(后退几次),0(刷新当前页面),正数(前进几次)

属性:length:获取的是从当前窗口开始的访问历史记录条数(默认是1表示当前)

详细用法参考这里

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var v = window.history.length;
            alert(v);//初始值为1
            function nextWeb(){
                window.history.go(1);//传正数(前进--forward())下一个历史记录,传负数(后退--back())上一个历史记录
            }
        </script>
    </head>
    <body>
        <button onclick="nextWeb()">下一个</button>
        <a href="http://www.baidu.com">abc</a>
        <a href="http://www.163.com">abc</a>
        <a href="http://www.sina.com">abc</a>
    </body>
</html>

Screen:屏幕对象

通常:两个属性height和width,得到屏幕的分辨率


非宅无以为乐