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. 十、RF运行方式pybot运行方式

    pybot命令 1.执行整个项目下的所有用例: pybot 项目路径.例如: pybot D:\RF 2.执行某个suit中的所有用例: pybot 项目路径\suit文件名称. 例如:pybot D ...

  2. 五、RF中UI自动化操作基础

    列表分类 1.打开浏览器 Open Browser   url   browser [ url | browser=firefox | alias=None | remote_url=False | ...

  3. 3、Shiro授权

    Shiro授权过程和认证过程相似: 项目结构: package com.shiro.shiroframe; import org.apache.shiro.SecurityUtils; import ...

  4. url的匹配问题

    1.例如我当前访问的路径是 127.0.0.1:8000/app01/customer/ 此时我需要在这个界面跳转另外一个界面127.0.0.1:8000/app02/books/,于是我定义一个a标 ...

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

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

  6. JavaSE部分1.Java基础

    1.为什么重写equals()还要重写hashcode()?  (equals()和hashCode()是java Object中两个基本方法) 首先equals与hashcode间的关系是这样的: ...

  7. 测开之路一百二十八：flask之重定向和404

    a.b两个视图,分别返回a的页面和b的页面 重定向:redirect 重定向到路由:请求/a/时,重定向到/b/ 重定向到视图函数:url_for(“函数名“),访问/a/时,重定向到函数b() 主动 ...

  8. nohup后台运行

    1.信息输出 nohup java -jar xxxx.jar & 2.信息不输出 nohup java -jar xxxx.jar >/dev/null 2>&1 &am ...

  9. 【MyBatis】-----【MyBatis】---表级联系【一对一】--增删改查

    一.核心配置文件 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE configuration ...

  10. eslint+prettier 的 VSCode配置项

    { "files.autoSave": "off", "editor.fontSize": 12, "terminal.integ ...