JavaScriptDOM之BOM

Posted jlfw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScriptDOM之BOM相关的知识,希望对你有一定的参考价值。

BOM

1.BOM是什么

提供了独立页面内容,与浏览器相关的一系列对象,管理窗口之间通信

2.Window对象

具有双重角色,对象即是允许JS访问浏览器窗口的一个对象,和ECMAScript规范中的Global全局对象,在浏览器运行JS逻辑时,在全局作用域定义的对象,变量和函数

<body>
<form action="#">
    <input type="text" id="username">
    <input type="submit">
</form>
<script>
    var form = document.forms[0];
    form.addEventListener(‘submit‘,function (event) {
        console.log(‘该表单已被提交‘);
    });
</script>
</body>

window对象的属性

<script>
    // BOM中其他对象是作为window对象的属性存在
    console.log(window.navigator);
    console.log(window.location);
    console.log(window.history);
    console.log(window.document);
    console.log(window);
    // window对象的self属性-表示window对象本身(是只读属性)
    console.log(window.self);// 还是window对象
    console.log(window.innerWidth, window.innerHeight);
    // window对象的innerWidth和innerHeight - 浏览器窗口的内部宽度和高度
</script>

window对象的方法

<style>
        #qh {
            width: 300px;
            height: 200px;
            border: 1px solid black;
            display: none;
        }
    </style>
</head>
<body>
<!-- 点击按钮时,打开提示框 -->
<button id="btn">按钮</button>
<div id="qh"></div>

<script>
    // 提示框
    // window.alert(‘xxxx‘);
    // 确定框
    // var flag = window.confirm(‘你确定退出吗?‘);
    // alert(flag);
    // 输入框
    /*var result = window.prompt(‘请输入你的用户名:‘);
    alert(result);*/

    var btn = document.getElementById(‘btn‘);
    btn.addEventListener(‘click‘,function(){
        var dialog = document.getElementById(‘qh‘);
        dialog.style.display = ‘block‘;
    });

    /*
        * window.setTimeout()和window.clearTimeout()方法
          * 该组方法表示延迟执行
        * window.setInterval()和window.clearInterval()方法
          * 该组方法表示循环(周期)执行
     */

</script>

Navigator对象

<body>
<script>
    console.log(‘浏览器代码名: ‘ + navigator.appCodeName);
    console.log(‘浏览器名称: ‘ + navigator.appName);
    console.log(‘浏览器平台和版本信息: ‘ + navigator.appVersion);
    console.log(‘运行浏览器操作系统平台: ‘ + navigator.platform);

    console.log(navigator.userAgent);

</script>
</body>

定时器

延时执行

setlnterval()方法设置个定时器,将该定时器只执行一次函数

`<script>
    console.log(‘this is message...‘);

    /*
        setTimeout(function, delay)方法
        * 设置个定时器
        * 参数
          function-表示延迟执行的代码逻辑
          delay-表示延迟执行时间,单位为毫秒
        * 返回值-表示当时器的标识
        * 注意-打乱代码默认的顺序执行流程
     */
    var t = setTimeout(function(){
        console.log(‘you my timeout...‘);
    },10000);

    // clearTimeout(t);

    console.log(‘you my message too...‘);

</script>`

周期执行

以setlnterval()方法,重复调用个函数或执行段代码

<script>
    console.log(‘you my message...‘);

    /*
        setInterval(function, delay)方法
        * 设置个周期执行的定时器
        *
          function - 表示延迟执行的代码逻辑
          delay - 表示延迟执行的时间,单位为毫秒
        * 返回值 - 表示当前定时器的标识
     */
    /*setInterval(function(){
        console.log(‘you my interval...‘);
    },1000);*/


    /*function fun(){
        console.log(‘you my interval...‘);
        setTimeout(fun,1000);
    }
    fun();*/
    (function fun(){
        console.log(‘you my interval...‘);
        setTimeout(fun,1000);
        // setTimeout(arguments.callee,1000);
    })();

    console.log(‘this is message too...‘);

</script>

以上是关于JavaScriptDOM之BOM的主要内容,如果未能解决你的问题,请参考以下文章

javascript之BOM对象(二location对象)

DOM和BOM

JavaScriptDOM之表单操作

Python学习-前台开发-JavaScriptDom和jQuery

JS之BOM与DOM

0184 BOM 之 navigator对象