DOM和BOM的区别

在浏览器中运行的JavaScript可以认为由三部分组成:ECMAScript描述了该语言的语法和基本对象,DOM文档对象模型描述了处理网页内容的方法和接口,BOM浏览器对象模型描述了与浏览器进行交互的方法和接口。

DOM

  • DOMDocument Object Model的缩写,即文档对象模型。
  • DOMW3C的标准。
  • DOM最根本对象是document,即window.document

DOM全称是Document Object Model即文档对象模型,是针对XML的基于树的API,描述了处理网页内容的方法和接口,是HTMLXMLAPIDOM把整个页面规划成由节点层级构成的文档。DOM和文档有关,这里的文档指的是网页,也就是HTML文档。网页是由服务器发送给客户端浏览器的,无论用什么浏览器,接收到的HTML都是一样的,所以DOM和浏览器无关,其关注的是网页本身的内容,由于是相对独立于浏览器的,所以可以制定标准。
DOM定义了Node等对象做为这种实现的基础,就是说为了能以编程的方法操作这个HTML的内容,例如添加元素、修改元素、删除元素等,我们把这个HTML结构看做一个对象树DOM树,其本身和里面的所有东西例如<div></div>这些标签都看做一个对象,每个对象都叫做一个节点Node,节点可以理解为DOM中所有Object的父类。

BOM

  • BOMBrowser Object Model的缩写,即浏览器对象模型。
  • BOM没有相关标准。
  • BOM的最根本对象是window

BOMBrowser Object Model即浏览器对象模型,DOM是为了操作文档出现的接口,而BOM就是为了控制浏览器的行为而出现的接口,例如跳转页面、前进、后退、书签等等,程序还可能需要获取屏幕的大小之类的参数,所以BOM就是为了解决这些事情出现的接口,例如我们要让浏览器跳转到另一个页面就需要Location对象。
由于没有标准,不同的浏览器实现同一功能,可以需要不同的实现方式,所以对于上面说的功能,不同的浏览器的实现功能所需要的JavaScript代码可能不相同。虽然BOM没有一套标准,但是各个浏览器的常用功能的JavaScript代码还是大同小异的,对于常用的功能实际上已经有默认的标准了,所以不用过于担心浏览器兼容问题,不是每个浏览器都有自己的BOM,也不需要为每个浏览器都学习一套BOM,只是个别浏览器会有新增的功能会在BOM上体现出来。

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://www.zhihu.com/question/20724662
https://juejin.cn/post/6844903939008102413
https://blog.csdn.net/xiao__gui/article/details/8315148

DOM和BOM的区别相关推荐

  1. js中DOM, DOCUMENT, BOM, WINDOW 区别

    全栈工程师开发手册 (作者:栾鹏) js系列教程6-BOM操作全解 js系列教程7-DOM操作全解 js中DOM, DOCUMENT, BOM, WINDOW 区别 DOM 全称是 Document ...

  2. JavaScript之彻底搞懂DOM与BOM及其区别与用法

    目录 I. 简述:何为DOM,何为BOM? II. DOM及其相关操作 II.I DOM树

  3. JavaScript实战操作(DOM,BOM)

    JS语法 页面文档对象模型 浏览器对象模型 JS ECMAScript DOM BOM API 应用程序编程接口,就是一个工具,以便于能轻松实现想要完成的功能 Web API Web API是浏览器提 ...

  4. JS中的DOM与BOM

    一.Javascript组成 JavaScript的实现包括以下3个部分: ECMAScript(核心) 描述了JS的语法和基本对象. 文档对象模型 (DOM) 处理网页内容的方法和接口 浏览器对象模 ...

  5. [html] DOM和BOM有什么区别?

    [html] DOM和BOM有什么区别? BOM指 浏览器对象模型提供了独立于内容而与浏览器窗口进行交互的对象.描述了与浏览器进行交互的方法和接口,可以对浏览器窗口进行访问和操作,譬如可以弹出新的窗口 ...

  6. (九)JS-WEB-API(DOM、BOM、事件、Ajax、存储)【每个工程师必须熟练掌握的技能】

    JS-WEB-API 提问 DOM BOM 事件 Ajax 存储 从JS基础知识到JS-WEB-API JS基础知识 JS-WEB-API DOM(Document Object Model) DOM ...

  7. 提升对前端的认知,不得不了解Web API的DOM和BOM

    了解Web API的DOM和BOM 引言 正文 一.DOM操作 1.DOM的本质 2.DOM节点操作 (1)property形式 (2)attribute形式 3.DOM结构操作 (1)新增/插入节点 ...

  8. 再谈BOM和DOM(1):BOM与DOM概述

    JavaScript的实现包括以下3个部分: ECMAScript(核心):描述了JS的语法和基本对象. 浏览器对象模型(BOM):与浏览器交互的方法和接口 文档对象模型 (DOM):处理网页内容的方 ...

  9. 27、什么是DOM和BOM

    1.DOM DOM (Document ),简称文档对象模型.通过创建树来表示文档,描述了处理网页内容的方法和接口.用DOM API可以轻松地删除.添加和替换节点. DOM操作举例: 1)访问节点 d ...

最新文章

  1. 【刷题】BZOJ 4516 [Sdoi2016]生成魔咒
  2. Android新权限机制 AppOps
  3. 【Android 逆向】ELF 文件格式 ( 程序头偏移量 | 节区头偏移量 | 处理器特定标志 | ELF 文件头大小 )
  4. 在linux下安装星际译王
  5. matlab 第二类边界条件,第二类边界条件.ppt
  6. 软件开发中 前台、中台、后台英文_最近处处惹人爱的中台到底是什么
  7. 【Python3网络爬虫开发实战】6.4-分析Ajax爬取今日头条街拍美图
  8. Spring boot 2.x + Thymeleaf 公共部分抽取
  9. poj 1330 Nearest Common Ancestors
  10. 计算机字体库位置,win7电脑的字体库在哪里?
  11. macOS中安装secoclient
  12. 自己不能跑的车凭什么叫自行车?华为天才少年打造无人驾驶「自行车」
  13. ArcGIS版本更新对比
  14. 刨根究底字符编码之八——Unicode编码方案概述
  15. 计算ndvi值需要的数据_利用TM计算NDVI问题
  16. 工作后,又想读个名校的计算机硕士,该怎么做?
  17. echarts省级地图展示(包含3D地图)
  18. 手动删除百度全家桶流氓软件
  19. 什么是 DDoS?完整指南
  20. python刷微博关注_[代码全屏查看]-python刷新浪微博粉丝

热门文章

  1. Hadoop核心生态
  2. java后端跨域问题常用解决方案
  3. C语言编译器不检查数组下标越界
  4. 博世成立新部门布局互联交通服务
  5. TortoiseSVN checkout 之后图标(绿色勾之类的)没有显示出来的问题
  6. 《SSM框架实战》 整合 Freemarker
  7. centos 6.7 安装 最新版 git
  8. STM32 TIMER DIAGRAM
  9. 很久以前的C语言笔记
  10. ahjesus Axure RP 7.0注册码