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. [转帖]CTF -bugku-misc(持续更新直到全部刷完)

    CTF -bugku-misc(持续更新直到全部刷完) https://www.cnblogs.com/cat47/p/11432475.html 1.签到题 点开可见.(这题就不浪费键盘了) CTF ...

  2. [转帖] q命令-用SQL分析文本文件

    https://www.cnblogs.com/codelogs/p/16060830.html 简介# 在Linux上分析文本文件时,一般会使用到grep.sed.awk.sort.uniq等命令, ...

  3. [转帖]如何在本地编译安装部署自动化回归测试平台 AREX

    https://zhuanlan.zhihu.com/p/613877597 AREX 官方 QQ 交流群:656108079 本文将详细为大家介绍一下自动化回归测试平台 AREX 以及如何在本地进行 ...

  4. awk的简要使用

    原文地址:https://www.lujun9972.win/blog/2020/08/23/在命令行进行简单的统计分析/index.html 目录 使用awk获取最小值.最大值.中位数和平均值 使用 ...

  5. Arthas 超简单离线使用教程

    简介 Arthas 是阿里巴巴开源的一套监控java应用的工具 官网的文档地址: https://arthas.aliyun.com/doc/ 官方的简介说明: Arthas 是Alibaba开源的J ...

  6. vue3中retive的错误用法导致数据不跟新

    retive的错误用法 <template> <div> 司藤的信息==>{{ objInfo }} <button @click="handerHttp ...

  7. git创建分支出现 fatal: Not a valid object name: 'master'.

    今天使用git 创建新分支的时候 出现了一个错误 fatal: Not a valid object name: 'master'. 问题描述:一个非法的master,原因:本地还没有创建master ...

  8. vulnhub靶场渗透学习

    攻击机:192.168.100.251 目标机:192.168.100.17 netdiscover netdiscover -r 192.168.100.1/24 Currently scannin ...

  9. vim 从嫌弃到依赖(16)——宏

    终于到了我第二喜欢的vim功能了(当然了,最喜欢的是.命令).我原本计划在介绍完.命令之后介绍宏,以便让各位小伙伴们能了解到vim对于重复操作进行的强大的优化.但是由于宏本身跟寄存器息息相关,所以还是 ...

  10. 强化学习调参技巧一: DDPG算法训练动作选择边界值_分析解决

    1.原因: 选择动作值只在-1 1之间取值 actor网络输出用tanh,将动作规范在[-1,1],然后线性变换到具体的动作范围.其次,tanh激活区是有范围的,你的预激活变量(输入tanh的)范围太 ...