浏览器中的DOM和BOM

每天都是不一样的太阳
273 阅读4分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第15天，点击查看活动详情

浏览器

浏览器的种类：Firefox 、Chrome、Edge、Safari、Opera、QQ浏览器、UC浏览器和百度浏览器等等 主流浏览器：Firefox 、Chrome、Edge、Safar、Opera。因为他们有自己的内核。

浏览器内核是浏览器的核心，也称“渲染引擎”。

浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。

  1. 渲染引擎: 用来解释网页语法并渲染到网页上。
  2. JS 引擎: 解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。
浏览器内核
IETrident
EdgeWebkit
Chrome以前是Webkit内核，现在是Blink内核
FirefoxGecko
SafariWebkit
Opera最初是自己的Presto内核，后来是Webkit，现在是Blink内核

BOM

BOM（Browser Object Model）是指浏览器对象模型。

不存在浏览器对象模型（BOM）的官方标准。每个厂商都有各自的实现。只不过是大家约定俗称的实现了相同的方法或者属性。

  1. 使用 BOM，可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 JavaScript 有能力与浏览器"对话"。
  2. 系统内置的对象：window、history、navigator、location、screen

image.png

window对象

  1. window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。
  2. 它既是ECMAscript规定的全局global对象，又是javascript访问浏览
  3. Window 对象代表一个浏览器窗口或一个框架。Window 对象会在<body>或<frameset>每次出现时被自动创建。器窗口的一个接口。

开发中常用到的属性或者方法

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.alert("message"); - 弹出信息
window.setTimeout() - 定时器，定时执行
window.clearTimeout() - 清除定时器
window.setInterval() - 间隔定时器执行
window.clearInterval() - 清除定时器
window.history.go(-1) - 浏览器后退
window.history.back()
window.history.forward()
window.moveTo() -移动当前窗口
window.resizeTo() -重新调整当前窗口
window.innerHeight - 浏览器窗口的内高度（以像素计）窗口的尺寸
window.innerWidth - 浏览器窗口的内宽度（以像素计）窗口的尺寸
scrollTo() - 把内容滚动到指定的坐标。

history对象

保存了用户访问浏览器的历史记录。

属性和方法

History.length：当前窗口访问过的网址数量（包括当前网页）
History.state：History 堆栈最上层的状态值
window.history.go(-1) - 浏览器后退
window.history.pushState(state, title, url) - 在历史中添加一条记录
history.pushState({page: 1}, 'title 1', '?page=1') - 修改 History 对象的当前记录
window.addEventListener('popstate', function(event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
}); - popstate事件.监听浏览器history对象的变化
new URLSearchParams() - 回来获取url？之后的参数。部分的浏览器暂无实现，存在差异

navigator对象

浏览器实例对象。储存浏览器信息

属性和方法

navigator.userAgent - 浏览器的厂商和版本信息  识别浏览器
navigator.onLine - 示用户当前在线还是离线（浏览器断线）
navigator.language - 浏览器的首选语言 只读属性

Screen 对象

当前窗口所在的屏幕,显示器设备的信息。

属性和方法

Screen.height - 浏览器窗口所在的屏幕的高度。 显示器的分辨率与浏览器设置无关，缩放网页并不会改变分辨率。
Screen.width - 浏览器窗口所在的屏幕的宽度

location对象

提供当前窗口加载的文档的相关信息和页面导航功能。既是window对象的属性，又是document对象的属性。

属性和方法

location.href - 返回url的信息
location.reload() - 重置当前页面。 如果强制从服务器取得，传入true参数
location.hash - 返回url#之后的内容，如果没有返回空字符串
location.port - 获取url端口号

DOM

DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。

DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准

image.png

DOM节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：

  1. 整个文档是一个文档节点（document对象）
  2. 每个 HTML 元素是元素节点（element 对象）
  3. HTML 元素内的文本是文本节点（text对象）
  4. 每个 HTML 属性是属性节点（attribute对象）
  5. 注释是注释节点（comment对象）

属性和方法 Image.gif

总结

每个浏览器都有各自的特点，能够拥有自己的内核，还是主流的浏览器。在BOM中，window对象是顶层对象，document对象也是其中的一个属性对象。DOM对象，是负责文档展示和操作的。

avatar
文章
阅读
粉丝