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. 测开之路一百四十四：ORM之SQLAlchemy查询

    在上一篇的基础上,插入数据 查询 Department.query.all() # 用表对象查db.session.query(Department).all() # 用db对象查 查询前两条,直接p ...

  2. robotframework之使用cookies登陆

    有的系统是使用cookies保持登陆的,而RF的Request库里面没有像Selenium2Library里面一样操作cookies的关键字,若接口需要登录则只能用UI自动化先登录,然后再将cooki ...

  3. 2018.03.29 python-pandas transform/apply 的使用

    #一般化的groupby方法:apply df = pd.DataFrame({'data1':np.random.rand(5), 'data2':np.random.rand(5), 'key1' ...

  4. 【Qt开发】QT中显示图像数据

    一般图像数据都是以RGBRGBRGB--字节流的方式(解码完成后的原始图像流),我说成字节流,那就表明R,G,B的值各占一个字节,在编程时表示的就是unsigned char * data. 我们先来 ...

  5. docker 安装mysql 并将文件挂载到本地

    首先准备好挂载的文件路径 执行mysql创建以及挂载的命令(这里还可以使用-e环境变量来创建新用户MYSQL_USER,MYSQL_PASSWORD) docker run -d -p : --res ...

  6. 我在拼多多百亿补贴时买了个MAC probook16G苹果笔记本电脑用来写代码，有图有真相，靠谱吗？

    在拼多多买了拼了个MACBOOK pro,有点担心质量问题,商家承诺有电子普票,有大哥在上面买过贵重物品吗?欢迎评论留言交流

  7. 使用certbot 为nginx或openresty启用https

    certbot 使用letsencrypt 生成免费https证书 以下内容网上整理,原文地址 https://segmentfault.com/a/1190000005797776 -------- ...

  8. 通过proxychains实现Ubuntu终端代理

    1.在终端内使用代理,需要使用proxychains: sudo apt-get install proxychains 2.编辑 /etc/proxychains.conf sudo gedit / ...

  9. 这款多线程中间件，吊打 Redis！

    Java技术栈 www.javastack.cn 优秀的Java技术公众号 今天给大家介绍的是KeyDB,KeyDB项目是从redis fork出来的分支.众所周知redis是一个单线程的kv内存存储 ...

  10. HTML中button标签点击实现页面跳转

    方法1:使用onclick事件 <input type="button" value="按钮" onclick="javascrtpt:wind ...