BOM

BOM介绍

全称 Browser Object Mode 浏览器对象模式

操作浏览器的API接口。比如浏览器自动滚动

  • Windows对象的顶层部分是BOM的顶层(核心)对象,所有的对象都是通过它延申出来的,也可以称为windowns的子对象。

  • DOM是BOM的一部分

windows对象:

  • windows对象是JavaScript中的顶级对象
  • 全局变量/自定义函数也是windows对象的属性和方法
  • window对象下的属性和方法调用时,可以省略window

BOM的常见内置方法和内置对象

window对象

弹出系统对话框

比如说,alert(1)是window.alert(1)的简写,因为他是window的子方法。系统对话框有下面三种方法:

alert();    //不同浏览器中的外观是不一样的
confirm(); //兼容不好
prompt(); //不推荐使用

打开窗口 关闭窗口

1. 打开窗口
window.open('http://www.baidu.com','_block')

// url: 要打开的地址
// target:新窗口的位置 可以是:_block _self _parent 父框架
2.关闭窗口
window.close(); // 关闭当前打开的页面

获取窗口的宽高

window.innerHeight;   // 获取浏览器的内部高度
388
window.innerWidth; // 获取浏览器的内部宽度
1536
// 提示: 随着窗口的缩小,所以获取到的宽度和高度也会发生变化

Location对象

window.location可以简写为location。location相当于浏览器地址栏,可以将url解析为独立的片段

location对象的属性

  • href:操作地址栏里的url 进行跳转
  • host:主机名,包括端口
  • hash:返回url#号后面的内容 包含#
  • hostname:主机名
  • pathname:url中的路径部分
  • protocol:协议 一般http或者https
  • search:查询字符串

navigator对象

window.navigator 的一些属性可以获取客户端的一些信息。

  • useragent:系统,浏览器
  • platform:浏览器支持的系统 win mac
console.log(navigator.userAgent);
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36 console.log(navigator.platform);
Win32

history对象

返回和前进的操作

// 返回上一次
history.back();
history.go(-1) // 0表示刷新当前页面 // 前进一次
history.forward();
history.go(1)

screen对象(了解即可)

屏幕对象,不常用。

screen.availWidth // 可用的屏幕宽度
screen.availHeight // 可用的屏幕高度

定时器

在js的定时器中分为两种:setTimeout() 和 setInterval()

setTimeout()

只在指定时间后执行一次

// setTimeout(函数,时间)
var t1 = setTimeout(fn,4000);
var t2 = setTimeout(fn,1000);
var t3 = setTimeout(fn,1000);
function fn(){
alert('hello world;')
}
console.log(t1) clearTimeout(t2); // 去除定时器
clearTimeout(t3);

setIntervar()

在指定时间内周期循环执行

var t = setInterval(fn,1000);
function fn(){
console.log('hello')
}
clearTimeout(t)

javascript bom操作的更多相关文章

  1. javascript bom 编程

     javascript bom  编程 BOM: 浏览器对象模型 DOM Window  :窗口Window Document 属性:     status :状态栏     self:自己    ...

  2. JavaScript BOM DOM 对象

    title: JavaScript BOM DOM 对象 tags: JavaScript --- browser object model document onject model BOM对象 w ...

  3. JS的BOM操作语法

    整理了一下JS的BOM操作语法,这里记录一下. <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  4. JavaScript——BOM和DOM

    什么是BOM bom:浏览器对象模型 什么是DOM dom:文档对象模型 BOM操作: 调用windows浏览器窗口 windows对象可以通过点调用子对象 windows.navigator对象,可 ...

  5. JavaScript高级:JavaScript面向对象,JavaScript内置对象,JavaScript BOM,JavaScript封装

    知识点梳理 课堂讲义 1.JavaScript面向对象 1.1.面向对象介绍 在 Java 中我们学习过面向对象,核心思想是万物皆对象. 在 JavaScript 中同样也有面向对象.思想类似. 1. ...

  6. BOM操作

    BOM操作 //浏览器对象模型 opener=window.open(页面的url,打开方式) opener.document.body.style.background="red" ...

  7. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  8. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

  9. select元素javascript常用操作 转

    /*------------------------------------------------------ *作者:xieyu @ 2007-08-14 *语言:JavaScript *说明:s ...

随机推荐

  1. cgp的辣鸡比赛题解

    目录 cgp的gcd 题目链接 思路 代码 cgp调戏妹子 题目链接 思路 代码 cgp的序列 题目链接 思路 代码 cgp的背包 题目链接 思路 代码 cgp的gcd 题目链接 传送门 思路 首先看 ...

  2. C++ 如何进阶?

    1.C++的用途和意义 总体来说,C++作为一门软件开发语言,它的流行度是在减少的.主要原因在于语言的复杂和灵活导致软件开发成本提高,这体现在开发周期和人力上.它不适用于startup公司的快速开发, ...

  3. 【洛谷】P1275 魔板(暴力&思维)

    题目描述 有这样一种魔板:它是一个长方形的面板,被划分成n行m列的n*m个方格.每个方格内有一个小灯泡,灯泡的状态有两种(亮或暗).我们可以通过若干操作使魔板从一个状态改变为另一个状态.操作的方式有两 ...

  4. 常用spaceclaim脚本(三)

    拉伸曲线 ptList=List[Point]() #定义一个点的列表 ptList.Add(Point.Create(MM(11),MM(-14),MM(0))) #创建点,并放入列表当中 ptLi ...

  5. JVM 扩展类加载器1

    1.创建类 public class MyTest19 { public static void main(String[] args) throws Exception { System.out.p ...

  6. Spring’s RestTemplate

    Spring’s RestTemplate /** * After the word document is generated in memory we can upload it to the s ...

  7. cache-control: max-age=1,s-maxage=1

    cache-control: max-age=1,s-maxage=1

  8. 如何改为root用户 并挂载

    改为root用户才能挂载,使用的命令是sudo su,换成自己就su + 名字就好了,比如bnrc. 进入root之后,执行命令mount /dev/sdb/ /diskb/,即mount + 使用的 ...

  9. snmpwalk 安装与使用详解-windows下

    snmpwalk是SNMP的一个工具,它使用SNMP的GETNEXT请求查询指定OID(SNMP协议中的对象标识)入口的所有OID树信息,并显示给用户.通过snmpwalk也可以查看支持SNMP协议( ...

  10. mysql 安装参考

    https://blog.csdn.net/qq_38756992/article/details/84929787 https://www.cnblogs.com/joyny/p/10991194. ...