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. JavaScript中DOM与BOM的区别

    1.BOM BOM全称为Brower Object Model,中文翻译为浏览器对象模型,提供了独立于内容而与浏览器窗口进行交互的对象.描述了与浏览器进行交互的方法和接口.通过BOM可以用来获取或设置 ...

  2. DOM 和 BOM 区别

    DOM, DOCUMENT, BOM, WINDOW 区别DOM 是为了操作文档出现的 API,document 是其的一个对象:BOM 是为了操作浏览器出现的 API,window 是其的一个对象. ...

  3. javascript、ECMAScript、DOM、BOM关系

    ECMAScript,正式名称为 ECMA 262 和 ISO/IEC 16262,是宿主环境中脚本语言的国际 Web 标准. ECMAScript 规范定义了一种脚本语言实现应该包含的内容:但是,因 ...

  4. day 52 js学习 DOM 和BOM

    前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...

  5. JAVAScript中DOM与BOM的差异分析

    JAVAScript 有三部分构成,ECMAScript,DOM和BOM,根据浏览器的不同,具体的表现形式也不尽相同.我们今天来谈一谈DOM和BOM这俩者之间的差异. 用百科上的来说: 1. DOM是 ...

  6. 前端学习 之 JavaScript DOM 与 BOM

    一. DOM介绍 1. 什么是DOM? DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构. 目的其实就是为了能让js操作html元素而制定的一个规范. DOM就 ...

  7. sax/dom/jdom/dom4j的区别

    sax/dom/jdom/dom4j的区别[转] 博客分类: xml   网上能够查到很多的4种解析方式的区别,我再做一下摘录和总结,顺带给自己做个备份. SAX sax分析器在对xml文档进行分析时 ...

  8. 物料BOM和生产订单BOM的区别

    物料BOM和生产订单BOM的区别[@more@] 一般企业生产部在SAP创建生产订单的时候,就会产生一个生产订单BOM,这里的生产订单BOM是读取的物料BOM. 由于其它原因,需要修改成品的某几个零部 ...

  9. 理清javascript的相关概念 DOM和BOM

    javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异.JavaScript=语法+BOM(含DOM) ...

  10. JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)

    本节讲Dom和Bom模型概念讲解(节点获取,window对象). out.js: 写了2个输出到页面的函数. function println(param){ document.write(param ...

随机推荐

  1. [转帖]一文看懂Linux内核页缓存(Page Cache)

    https://kernel.0voice.com/forum.php?mod=viewthread&tid=629   玩转Linux内核 发布于 2022-8-9 22:19:08 阅读  ...

  2. [转帖]记druid 连接池没满,但超时问题 GetConnectionTimeoutException active 5, maxActive 100

    记druid 连接池没满,但超时问题 GetConnectionTimeoutException active 5, maxActive 100 问题说明 线上服务突然出现报错,通过日志查找发现是因为 ...

  3. [转帖]ORACLE恢复神器之ODU/AUL/DUL

    https://www.cnblogs.com/oracle-dba/p/3873870.html 分享ORACLE数据库恢复神器之ODU.DUL和AUL工具. ODU:ORACLE DATABASE ...

  4. [转帖]oracle OSWatcher安装部署

    Oswatch是oracle官方提供,用于收集操作系统性能的小工具,oswatch的安装与使用也比较简单,直接解压就可以使用.oswatch是通过调用系统的命令完成信息的收集,如:ps ,top ,m ...

  5. 神经网络优化篇:详解为超参数选择合适的范围(Using an appropriate scale to pick hyperparameters)

    为超参数选择合适的范围 假设要选取隐藏单元的数量\(n^{[l]}\),假设,选取的取值范围是从50到100中某点,这种情况下,看到这条从50-100的数轴,可以随机在其取点,这是一个搜索特定超参数的 ...

  6. ElasticSearch必知必会-基础篇

    商业发展与职能技术部-体验保障研发组 康睿 姚再毅 李振 刘斌 王北永 说明:以下全部均基于eslaticsearch 8.1 版本 一.索引的定义 官网文档地址:https://www.elasti ...

  7. Why gRPC ?

    gRPC(gRPC Remote Procedure Call)是由 Google 开发的开源 RPC 框架,它基于 HTTP/2 标准,使用 Protocol Buffers 作为接口定义语言(ID ...

  8. yum 安装失败解决思路$releasever(curl#6 - "Could not resolve host: mirrorlist.centos.org; Unknown error")

    问题 公司使用刀片机的系统版本是CentOS 7.9.2009(Core),本人在重新安装虚拟机时,也使用对应的系统版本,在安装软件时,yum无法正常使用,一开始觉得,centos的release版本 ...

  9. Java 自增自减运算符和移位运算符介绍

    摘自 JavaGuide (「Java学习+面试指南」一份涵盖大部分 Java 程序员所需要掌握的核心知识.准备 Java 面试,首选 JavaGuide!) 自增自减运算符 在写代码的过程中,常见的 ...

  10. 【7】python_matplotlib 输出(保存)矢量图方法;画图时图例说明(legend)放到图像外侧;Python_matplotlib图例放在外侧保存时显示不完整问题解决

    1.python_matplotlib 输出(保存)矢量图方法 用python的matplotlib画出的图,一般是需要保存到本地使用的.如果是用show()展出的图,再右键保存,这样的图是失帧而非矢 ...