DOM和BOM的区别

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

DOM

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

DOM全称是Document Object Model即文档对象模型,是针对XML的基于树的API,描述了处理网页内容的方法和接口,是HTML和XML的API,DOM把整个页面规划成由节点层级构成的文档。DOM和文档有关,这里的文档指的是网页,也就是HTML文档。网页是由服务器发送给客户端浏览器的,无论用什么浏览器,接收到的HTML都是一样的,所以DOM和浏览器无关,其关注的是网页本身的内容,由于是相对独立于浏览器的,所以可以制定标准。

DOM定义了Node等对象做为这种实现的基础,就是说为了能以编程的方法操作这个HTML的内容,例如添加元素、修改元素、删除元素等,我们把这个HTML结构看做一个对象树DOM树,其本身和里面的所有东西例如<div></div>这些标签都看做一个对象,每个对象都叫做一个节点Node,节点可以理解为DOM中所有Object的父类。

BOM

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

BOM是Browser 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. idea报错 "cannot access ..."的解决办法

    File -> Invalidate Caches -> Invalidate and Restart

  2. vim工具极简总结

    vim工具总结 背景 很多操作记不住. 想着总结当笔记使用. 备忘 基本总结 vim somefile 打开/新建文件 i/a/insert按键 进入插入模式 insert 连续两次 进入替换模式 e ...

  3. [转帖]Linux三剑客之sed的初阶使用

    https://www.jianshu.com/p/ceea435635a2 大多数情况下,对于文件内容的修改需要依赖交互式的软件来实现,例如vim修改文件的内容则是依赖光标的移动和修改操作来完成对文 ...

  4. [转帖]CentOS8时间同步服务

    时间同步服务 CentOS7之前的版本用的是ntpdate服务,之后用的是chrony服务 默认是安装的了 查看版本 [root@centos8 ~]#rpm -qi chrony Name : ch ...

  5. [转帖]Linux权限详解(chmod、600、644、666、700、711、755、777、4755、6755、7755)

    https://www.cnblogs.com/monjeo/p/12191673.html 权限简介Linux系统上对文件的权限有着严格的控制,用于如果相对某个文件执行某种操作,必须具有对应的权限方 ...

  6. Windows 和 linux 下面 Redis 性能比较

    Windows 和 linux 下面 Redis 性能比较 问题来源 公司里面有一些环境还是使用Windows来跑 对应的. Redis和nginx 也是跑在Windows上面 但是微软官网自从 3. ...

  7. Windows设置一键安装Mysql数据库的方法

    Windows设置一键安装Mysql数据库的方法 前言 因为MySQL数据库的8126 65536 以及3072最大索引长度等问题 研发这边提交的补丁总是出现稀奇古怪的问题. mysql数据库又因为D ...

  8. vue中render函数使用attrs绑定id、class、style、事件(5)

    1.h函数的三个参数 第一个参数是必须的. 类型:{String | Object | Function} 一个 HTML 标签名.一个组件.一个异步组件.或一个函数式组件. 是要渲染的html标签. ...

  9. 西门子PLC高校作业以及创新项目

    抢答器 在主持人按下启动按钮,3秒内

  10. 大语言模型的预训练[1]:基本概念原理、神经网络的语言模型、Transformer模型原理详解、Bert模型原理介绍

    大语言模型的预训练[1]:基本概念原理.神经网络的语言模型.Transformer模型原理详解.Bert模型原理介绍 1.大语言模型的预训练 1.LLM预训练的基本概念 预训练属于迁移学习的范畴.现有 ...