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. rosbag record and play

    话题录制: 录制所有发布出来的话题,此时默认将话题保存在一个以当时时间戳命名的文件夹中:   $ rosbag record -a1 录制指定话题:   $ rosbag record /topic1 ...

  2. python-接口开发flask模块（二）全局host配置

    设置全局变量优势很多主要是可以方便修改参数不需要每个代码单独修改,只修改host配置就可以,减少出错率,提高工作效率MYSQL_HOST = 'XXX.XXX.CCC.XXX' MYSQL_PORT ...

  3. Linux下去掉^M方法

    由于windows和Linux文件格式不同,windows下文件在Linux下行尾会有^M 去掉^M方法 sed -i ‘s/^M//g' filename #注意:^M的输入方式是 Ctrl + v ...

  4. 阶段3 1.Mybatis_04.自定义Mybatis框架基于注解开发_1 今日课程内容介绍

  5. Application.CreateForm()和TForm.Create()创建的窗体有什么区别么？二者在使用上各有什么技巧？(50分)

    https://wedelphi.com/t/135849/ 请详细些,并给出例子.谢谢. Application.CreateForm()创建的第一个可显示的窗体是自动成为主窗体,并且自动显示,并且 ...

  6. Java ——集合框架 list lambda set map 遍历方法 数据结构

    本节重点思维导图 集合框架 有序无序:元素放入的顺序与取出的顺序是否一致,一致即为有序,不一致即无序. List:允许重复.有序 ArrayList:长度可变的数组,遍历速度快 LinkedList: ...

  7. P1118 [USACO06FEB]数字三角形`Backward Digit Su`… (dfs)

    https://www.luogu.org/problemnew/show/P1118 看的出来是个dfs 本来打算直接从下到上一顿搜索 但是不会 看了题解才知道系数是个杨辉三角....... 这样就 ...

  8. C++中函数参数的扩展

    1,C++ 可以看成是一种更好的 C 语言,所以 C++ 会考虑 C 的欠缺部分,然后给  与一些补充和扩展,本节课讲述 C++ 对函数参数的非常重要的扩展: 2,函数参数的默认值: 1,C++ 中可 ...

  9. Django @csrf_exempt不适用于基于通用视图的类(Django @csrf_exempt does not work on generic view based class)

    class ChromeLoginView(View): def get(self, request): return JsonResponse({'status': request.user.is_ ...

  10. 利用CSS的translate属性或利用CSS实现图片居中的效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...