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. SOUI3.0仿Android插值动画使用方法

    在Android系统中,有插值动画,数值动画,属性动画,帧动画. 帧动画,在SOUI里可以通过AnimateImg这个控件来实现,其它几种动画3.0之前不支持,需要类似动画效果,只能自己通过定时器去实 ...

  2. Python基本语法_集合set/frozenset_内建方法详解

    目录 目录 前言 软件环境 可变集合Set set函数创建集合 创建空集合 集合元素的唯一性 集合推导式 set类型对象的内置方法 add增加一个元素 remove删除一个元素 pop随机删除并返回一 ...

  3. 中国MOOC_零基础学Java语言_第6周 使用对象_2GPS数据处理

    2 GPS数据处理(5分) 题目内容: NMEA-0183协议是为了在不同的GPS(全球定位系统)导航设备中建立统一的BTCM(海事无线电技术委员会)标准,由美国国家海洋电子协会(NMEA-The N ...

  4. 通过vue-router实现组件间的跳转

    三.通过VueRouter来实现组件之间的跳转提供了3种方式实现跳转:①直接修改地址栏中的路由地址 <!doctype html> <html> <head> &l ...

  5. 【SD系列】SAP SD模块-送达方和售达方的区别和联系

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[SD系列]SAP SD模块-送达方和售达方的区 ...

  6. Java多线程学习——sleep和yield

    Thread.sleep(); Thread.yield(); 相同点: 让线程暂停运行. 都是静态方法,可以直接调用. 不同点: sleep让线程从运行状态进入阻塞状态,但是不放开手中的资源. yi ...

  7. Flask（六）—— 自定义session

    Flask(六)—— 自定义session import uuid import json from flask.sessions import SessionInterface from flask ...

  8. [DS+Algo] 005 三种简单排序及其代码实现

    目录 1. 冒泡排序 BubbleSort 1.1 算法描述 1.2 性能分析 1.3 Python 代码实现 2. 选择排序 SelectionSort 2.1 算法描述 2.2 选择排序的主要优点 ...

  9. IntelliJ IDEA 2019.3 这回真的要飞起来了，新特性抢先看！

    IntelliJ IDEA 才公布下一个主要版本 2019.3 的 Roadmap,近日就发布了 IntelliJ IDEA 2019.3 的首个早期访问版本(即 EAP 版本),版本号为 2019. ...

  10. 洛谷 P5663 加工零件 & [NOIP2019普及组] （奇偶最短路）

    传送门 解题思路 很容易想到用最短路来解决这一道问题(题解法),因为两个点之间可以互相无限走,所以如果到某个点的最短路是x,那么x+2,x+4也一定能够达到. 但是如何保证这是正确的呢?比如说到某个点 ...