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>

【JavaScript】DOM之BOM的更多相关文章

  1. 前端学习 之 JavaScript DOM 与 BOM

    一. DOM介绍 1. 什么是DOM? DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构. 目的其实就是为了能让js操作html元素而制定的一个规范. DOM就 ...

  2. javascript、ECMAScript、DOM、BOM关系

    ECMAScript,正式名称为 ECMA 262 和 ISO/IEC 16262,是宿主环境中脚本语言的国际 Web 标准. ECMAScript 规范定义了一种脚本语言实现应该包含的内容:但是,因 ...

  3. 理清javascript的相关概念 DOM和BOM

    javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异.JavaScript=语法+BOM(含DOM) ...

  4. WEB 技术分类 Javascript DOM(Element Node) BOM

    Web technology for developers   Web 技术文档 备注:本文介绍web technology的分类,各自职责,因为之前一直就没有搞明白各种技术.各种名词究竟是属于哪个范 ...

  5. 【JavaScript】DOM和BOM之我的理解

    2018年12月17日 一.我们能够对html文档和浏览器做的操作 (一)html文档 增.删.改.可以在html中增加.删除.改动元素 (二)浏览器 地址栏:输入.修改地址 历史记录:前进.后退.跳 ...

  6. Javascript的组成——EMACScript、DOM、BOM

    EMACScript:一种规范,JS必须准守它的约定,JS的核心. DOM:文档对象模型,W3C标准,JS访问HTML文档的接口. BOM:浏览器对象模型,没有统一的标准.JS访问浏览器的接口. EM ...

  7. JAVAScript中DOM与BOM的差异分析

    JAVAScript 有三部分构成,ECMAScript,DOM和BOM,根据浏览器的不同,具体的表现形式也不尽相同.我们今天来谈一谈DOM和BOM这俩者之间的差异. 用百科上的来说: 1. DOM是 ...

  8. javascript学习笔记 BOM和DOM详解

    js组成 我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异. 1. DOM 是 W ...

  9. 关于JavaScript的DOM和BOM

    本文探讨JavaScript的三大部分中的两个部分,DOM和BOM. DOM介绍 DOM,全称Document Object Model,即文档对象模型.它 是W3C的一个标准,定义了一个对文档操作的 ...

  10. 前端（十六）—— JavaScript盒子模型、JS动画、DOM、BOM

    JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...

随机推荐

  1. SetWindowsHookEx失败

    使用下面代码hook鼠标 res = SetWindowsHookEx(WH_MOUSE_LL, _mouseHookProcedure, Marshal.GetHINSTANCE(System.Re ...

  2. java kryo序列化与反序列化

    https://blog.csdn.net/lan12334321234/article/details/84907492 问题: https://blog.csdn.net/baidu_384041 ...

  3. Jquery Ajax调用asmx出错问题

    1.//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释.      [System.Web.Script.Services.ScriptService] 这个 ...

  4. Unity Audio Source Properties

    Audio Clip 音频剪辑 将播放声音的剪辑文件 Mute 静音 Bypass Effects 直通效果 应用音频源的快速“直通”过滤效果.一个简单的方法来打开/关闭所有特效 Output 产量  ...

  5. RESR API (一)之Requests

    Requests 如果您正在做基于REST的Web服务,您应该忽略request.POST. - Malcom Tredinnick,Django开发团队 REST框架的Request类扩展了标准的H ...

  6. Django中Cookie和Session配置和操作

    Cookie Cookie以键值对Key-Value形势进行信息的存储. Cookie基于域名安全,不同域名的Cookie是不能互相访问的 Cookie是存储在浏览器中的一段纯文本信息,建议不要存储敏 ...

  7. Vue 渲染函数

    Vue 推荐在绝大多数情况下使用模板来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力.这时你可以用渲染函数,它比模板更接近编译器. 一 项目结构 二 App组 ...

  8. Django 多数据库联用（同一个APP的models里不同class用不同数据库）

    很多网站有多数据库联用的文章,如自强学堂http://code.ziqiangxuetang.com/django/django-multi-database.html 大都只讲解如何让不同的app对 ...

  9. MVC中的cshtml与ASPX的区别

    在MVC3中,即可以使用cshtml,也可以使用aspx, 这两者到底有什么区别呢? 越详细越好,如果是用来正式开发,用哪种比较好. --------------------------------- ...

  10. <<用法

    数据移位运算符,左移几位,如:x=i<<4;就是将i的值左移4位(放大2的4次方)后,赋给x,若i=2,则X=32.