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. BZOJ 4571: [Scoi2016]美味

    二次联通门 : BZOJ 4571: [Scoi2016]美味 /* BZOJ 4571: [Scoi2016]美味 dalao们都在说这题如果没有加法balabala就可以用可持久化trie解决了 ...

  2. 【一起来烧脑】一步学会AngularJS系统

    AngularJS是一个JavaScript框架 一个用JavaScript编写的库 [外链图片转存失败(img-JUTh171K-1563341248796)(https://upload-imag ...

  3. Java设计模式之一单例模式

    什么是单例模式 保证一个系统中的某个类只有一个实例而且该实例易于外界访问.例如Windows界面的任务管理器就可以看做是一个单例. 单例模式的使用场景 需要频繁的进行创建和销毁的对象: 创建对象时耗时 ...

  4. 登录注册页面模板汇总WEB前端(50套)

    土地指标管理系统入口登录页面 土地指标管理系统入口登录页面.zip: https://u18740809.pipipan.com/fs/18740809-382374353 紫色响应式登录页面模板 紫 ...

  5. Assignment2:因果图法的介绍与示例分析

    一. 黑盒测试:是一种常用的软件测试方法,它将被测软件看作一个打不开的黑盒,主要根据功能需求设计测试用例,进行测试.几种常用的黑盒测试方法和黑盒测试工具有,等价类划分法.边界值分析法.因果图法.决策表 ...

  6. Linux永久挂载新的硬盘

    1. 查看设备挂载的情况 fdisk -l 2. 查看数据盘是否格式化 lsblk -f 3. 如果没有,格式化硬盘 sudo mkfs.xfs /dev/vdb 4. 创建挂载点,例如 mkdir ...

  7. Java基础 import 要在所有的class前面

        JDK :OpenJDK-11      OS :CentOS 7.6.1810      IDE :Eclipse 2019‑03 typesetting :Markdown   code ...

  8. org.slf4j:slf4j-api:添加日志管理

    org.slf4j:slf4j-api:添加日志管理 转 https://blog.csdn.net/wolfking0608/article/details/77855624   一个好的程序, 完 ...

  9. 一起入门Python2之python的安装及初识

    鉴于论坛需要持续更新文章才能更好的保证论坛的访问量和质量,以及论坛的发展.承蒙前辈的信任和支持,我就教大家python第二课,教的不好请多担待和指正. 我们先讲python的安装方法: 方法链接:ht ...

  10. 深入Resource实现多语言支持的应用详解

    首先为假设有一个应用程序CAStudy,接着右键添加一个资源文件Resource1.resx. Resource1.resx里面如下: Main函数如下:static void Main(){    ...