JavaScript简单学习（九）-BOM

最新推荐文章于 2024-04-19 13:56:01 发布

zhang___gang

最新推荐文章于 2024-04-19 13:56:01 发布

阅读量152

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/zhang___gang/article/details/85263087

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

BOM（浏览器对象模型）模型中常用对象介绍

BOM-JavaScript是运行在浏览器中的，所以提供了一系列对象用于和浏览器窗口进行交互，这些对象主要包括window（使用较多）、document、location、navigator和screen等。通常称为浏览器对象模型（Brower Object Model）。

window对象是整个JavaScript脚本运行的顶层对象，直接定义的函数，全局变量，内置对象等等

window可以缺省

它的常用属性如下：

document	返回该窗口内装载的HTML文档
location	返回该窗口装载的HTML文档URL
navigator	返回浏览当前页面的浏览器，包含一系列的浏览器属性，包括名称、版本号和平台等
screen	返回当前浏览者屏幕对象
history	返回该浏览器窗口的历史

window对象的常用方法：

alert(),confirm(), prompt()	分别用于弹出警告窗口，确认对话框和提示输入对话框
close()	关闭窗口
moveBy(), moveTo()	移动窗口
resizeBy(), resizeTo()	重设窗口大小
scrollBy(), scrollTo()	滚动当前窗口的HTML文档
open()	打开一个新的浏览器窗口加载新的URL所指向的地址，并可指定一系列新的属性，包括隐藏菜单等
setInterval() clearInterval()	设置、删除定时器

window对象示例：

<!--JavaScript中window对象使用-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window对象使用</title>
    <script type="text/javascript">
        function testAlert() {
            //alert():警告框
            alert("点击按钮弹出警告框");
        }
        function testConfirm() {
            //confirm:确认框
            //有两种结果，true：是，false：否
            var result = confirm("是否关闭窗口");
            if(result) {
                //close():关闭窗口
                window.close(); //window可省略
            }
        }
        function testPrompt() {
            //Prompt:提升输入框
            var result = window.prompt("请输入你的名字： ");
            if(result != null) {
                alert("你的名字是" + result);
            }
        }
        function testScroll() {
            //滚动条到那个位置
            //window.scrollTo(30,30);
            //滚动条每次滚动多少
            window.scrollBy(10,10);
        }
        function testOpen() {
            window.open("http://www.baidu.com");
        }
        var timer = null;
        function testSetInterval() {
            //启动定时器
            //setInterval(函数引用,时间间隔毫秒);
            if(timer == null){
                timer = window.setInterval(showTime, 1000);//函数showTime加括号立即调用，不加（引用）1秒自动调用
            }
        }
        function testClearInterval() {
            if(timer != null){
                window.clearInterval(timer);
                timer = null; //重置
            }
        }
        function showTime() {
            //获取当前系统时间
            var date = new Date();

            //设置给div
            //在JavaScript中通过id获取这个div元素
            var element = document.getElementById("time");
            //设置div中的内容
            element.innerHTML = date.toLocaleString();
        }
    </script>
</head>
<body>
    <div id="time"></div>
    <!--给按钮添加按钮点击事件，onclick，点击时执行JavaScript函数-->
    <input type="button" name="alert" value="alert" onclick="testAlert()"/><br/>
    <input type="button" name="confirm" value="confirm" onclick="testConfirm()"/><br/>
    <input type="button" name="prompt" value="prompt" onclick="testPrompt()"/><br/>
    <input type="button" name="scroll" value="scroll" onclick="testScroll()"/><br/>
    <input type="button" name="open" value="open" onclick="testOpen()"/><br/>
    <input type="button" name="setInterval" value="启动定时器" onclick="testSetInterval()"/><br/>
    <input type="button" name="clearInterval" value="停止定时器" onclick="testClearInterval()"/><br/>

    <!--文字用于测试-->
    <p>万维网（英语：World Wide Web），亦作“WWW”、“Web”，是一个通过互联网访问的，由许多互相链接的超文本组成的系统[1]。英国科学家蒂姆·伯纳斯-李于1989年发明了万维网。1990年他在瑞士CERN的工作期间编写了第一个网页浏览器[2][3]。网页浏览器于1991年在CERN向外界发表，1991年1月开始发展到其他研究机构，1991年8月在互联网上向公众开放。

        万维网是信息时代发展的核心，也是数十亿人在互联网上进行交互的主要工具[4][5][6]。网页主要是文本文件格式化和超文本标记语言（HTML）。除了格式化文字之外，网页还可能包含图片、影片、声音和软件组件，这些组件会在用户的网页浏览器中呈现为多媒体内容的连贯页面。

        万维网并不等同互联网，万维网只是互联网所能提供的服务其中之一，是靠着互联网运行的一项服务。</p>
</body>
</html>

history对象常用方法：

back()	后退到上一个浏览的页面，如果该页面是第一个打开的，则无效果
forward()	前进到下一个浏览的页面，如果该页面是第一个打开的，则无效果
go(intValue)	该方法可指定前进或后退多少个页面，正前进，负后退

location对象常用属性：

hostname	文档所在地址的主机名
href	文档所在地址的URL地址
host	文档所在地址的主机地址
port	文档所在地址的服务端口
pathname	文档所在地址的文件地址
protocol	装载该文档所使用的协议，例如HTTP:等

screen对象常用属性：

availHeigh	窗口可以使用的屏幕高度，单位像素
availWidth	窗口可以使用的屏幕宽度，单位像素
colorDepth	用户浏览器表示的颜色位数，通常为32位（每像素的位数）

navigator对象常用属性：

appCodeName	浏览器代码名的字符串表示
appName	官方浏览器名的字符串表示
appVersion	浏览器版本信息的字符串表示
platform	浏览器所在计算机平台的字符串表示
userAgent	用户代理头的字符串表示
cookieEnabled	如果启用cookie返回true，否则返回false

zhang___gang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript简单学习（九）-BOM

BOM（浏览器对象模型）模型中常用对象介绍BOM-JavaScript是运行在浏览器中的，所以提供了一系列对象用于和浏览器窗口进行交互，这些对象主要包括window（使用较多）、document、location、navigator和screen等。通常称为浏览器对象模型（Brower Object Model）。window对象是整个JavaScript脚本运行的顶层对象，直接定义的函数...
复制链接

扫一扫