BOM 浏览器对象模型

Copy
115 阅读3分钟

BOM 浏览器对象模型

BOM是与浏览器进行交互的对象,核心是window(可将浏览器看做一个window对象).

BOM 是浏览器厂商在各自浏览器上定义的,尚无正式标准，兼容性较差.

一、window对象

全局变量是window对象的属性

  • window.innerHeight/innerWidth 返回窗口的文档显示区的高度/宽度
  • window.screenLeft/screenTop (screenX/screenY) 返回相对于屏幕窗口的y/x坐标

全局函数是window对象的方法

  • window.open(URL,name,specs,replace) 打开新窗口
  • window.close() 关闭当前窗口
  • window.moveTo() 移动当前窗口
  • window.resizeTo() 调整当前窗口的尺寸
  • window.scrollTo() 把内容滚动到指定位置

window常见事件

  • window.onload = function(){} 窗口加载事件,在页面完全加载完毕后执行
  • window.onresize 调整窗口的大小触发事件,可以用此事件处理响应式布局
  • onmouseenter 鼠标移动到元素上 (有子元素也只执行一次)
  • onmouseleave 鼠标移开元素
  • onmouseover 鼠标移动到元素上 (有子元素移动到也会执行,事件冒泡)
  • onmouseout 鼠标移开元素
  • onclick 鼠标单击事件
  • oncontextmenu 鼠标单击右键
  • onchange 当域的内容被改变时触发
  • onfocus 当聚焦时触发
  • onblur 当失焦时触发
  • onkeydown 当某个按键被按下时触发

二、window子对象

document文档对象

属性

  • document.URL 返回文档完整url
  • document.title 返回当前文档标题
  • document.readyState 返回文档状态
  • document.cookie 设置或返回与当前文档有关的所有 cookie
  • document.documentElement 返回文档的根节点
  • document.body 返回文档的body元素
  • document.images 返回对文档中所有 Image 对象引用
  • document.forms 返回对文档中所有 Form 对象引用
  • document.links 返回对文档中所有 Area 和 Link 对象引用
  • document.lastModified 返回文档被最后修改的日期和时间
  • document.referrer 返回上一个文档的url

方法

  • document.getElementById() 返回指定 id 的第一个对象的引用
  • document.getElementsByName() 返回带有指定名称的对象集合
<div name='name1'> document.getElementsByName('name1')
  • document.getElementsByTagName() 返回带有指定标签名的对象集合
  • document.getElementsByClassName() 返回文档中所有指定类名的元素集合，作为 NodeList 对象
  • document.querySelector() 返回文档中匹配指定的CSS选择器的第一元素
  • document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表
  • document.createElement() 创建元素节点
  • document.createTextNode() 创建文本节点
  • document.createAttribute() 创建一个属性节点
  • document.addEventListener() 向文档添加句柄
  • document.removeEventListener() 移除文档中的事件句柄(由 addEventListener() 方法添加)
  • document.write() 向文档写 HTML 表达式 或 JavaScript 代码

location对

window.location 当前页面url的信息

  • location.hostname 返回 web 主机的域名
  • location.pathname 返回当前页面的路径和文件名
  • location.port 返回 web 主机的端口 （80 或 443）
  • location.protocol 返回所使用的 web 协议（http: 或 https:）
  • location.href 返回当前页面url,也可通过赋值重定向到新的页面
  • location.reload() 刷新

history 历史对象

window.history 有关用户访问过的url信息

  • history.back() 加载历史列表中的前一个 URL (后退)
  • history forward() 加载历史列表中的下一个 URL (前进)
  • history.go(Number) 0为刷新,负数为后退,正数为前进

navigation

window Navigator 有关访问者浏览器的信息,常用与做浏览器类型的判断

  • navigator.appCodeName 浏览器代号
  • navigator.appName 浏览器名称
  • navigator.appVersion 浏览器版本
  • navigator.cookieEnabled 启用Cookies
  • navigator.platform 硬件平台
  • navigator.userAgent 用户代理
  • navigator.language 用户代理语言

screen

Window Screen 包含有关用户屏幕信息

  • screen.width/height 总宽度/高度
  • screen.availWidth/availHeight 可用宽度/高度
  • screen.colorDepth/pixelDepth 色彩深度/分辨率

弹窗

  • 警告框 alert("text");
  • 确认框
let bool = confirm("text");
if(bool){ console.log('按下确认按钮') }
else { console.log('按下取消按钮') }
  • 提示框
let person=prompt("text"); // 输入框输入的文本会赋值给person

计时

  • setInterval(fun,time) 间隔指定的毫秒数不停地执行指定的代码
  • setTimeout(fun,time) 在指定的毫秒数后执行指定代码
  • clearInterval(intervalVariable) 清除定时器
  • clearTimeout(intervalVariable) 清除倒计时器

Cookie

Cookie 是一些数据, 存储于你电脑上的文本文件中

Cookie 以名/值对形式存储

  • 创建 cookie cookie="username=John Doe";
  • 给cookie 添加一个过期时间（以 UTC 或 GMT 时间）,没有设置的情况下则是浏览器关闭删除
cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";
avatar
文章
阅读
粉丝