摘要：中主要关注的就是，对象的主要功能就是处理网页内容。中文翻译模型，如果你把这个词从中抽离出来，看下面的图片是不是就很好理解。年月制定的标准，由两大部分组成核心和。扩展鼠标和用户界面事件范围遍历，增加了对支持。
往期回顾
在上一期的《JavaScript的组成 | 核心-ECMAScript
》☜里，我们有说到JavaScript 是由三大部分组成，分别是：核心ECMAScript、文档对象模型-DOM、浏览器对象模型-BOM
那么本期就让我们继续往下说说DOM、BOM这两大部分吧：
文档对象模型（DOM）
面试官很喜欢问的：“你知道什么是文档对象模型吗？”，那今天我们一个个来解释一下吧：
DOM：Document Object Model（文档对象模型）
Document
中文翻译：文档，这里的文档指的是XML和HTML的页面，当你创建一个页面并且加载到Web浏览器中，DOM就在幕后悄然而生，它会把你编写的网页文档转换成一个文档对象。
Object
中文翻译：对象，学习js的同学一定对“一切皆对象”这句话不会陌生；
在JavaScript语言的类型大致可以分为以下三种：
用户定义对象
自行创建的对象，例如：
var obj = {}
内置对象
内置在JavaScript中的对象，无需我们创建，可以直接使用，例如：Array、Math和Data等
宿主对象
上期我们知道了什么是宿主环境以后，应该对宿主对象是什么有了一定的了解，在这里我们指的是浏览器提供的对象，例如:window、document。
DOM中主要关注的就是document，document对象的主要功能就是处理网页内容。
Model
中文翻译：模型，如果你把这个词从DOM中抽离出来，看下面的图片~是不是就很好理解。
打个比方，如图：是一套小区建筑模型，基本上任何售楼处都会有它的身影，买房的人只需要根据这套模型就可以了解建设完成后的小区长什么样子，有哪些公共设施，植被面积又有多少………
而DOM也像一个这样的模型，但它代表着加载到浏览器窗口的当前网页，我们可以利用JavaScript对它进行读取。
有了模型之后，我们同样需要能看懂模型（可以理解为我需要知道这个模型是干什么用的）；
如果没有看懂模型，那就像跟一个盲人说，太阳是会发光发热的，对于盲人来说，他是没有这个概念的，因为他看不到太阳；
所以，虽然我们可以通过JavaScript对DOM进行读取，但是我们要必须先能看懂模型。
DOM把一份文档表示为一颗树，有一个主干支以及无数的分干支，其实我个人觉得，更像是族谱。因为在描述标签之间关系的时候，我们经常用“父级”、“子级”、“兄弟”这样的词来表明并列标签和嵌套标签。
例如以下图片：
具体代码如下：
Document Hello World!
欢迎观看本次文章，包含以下内容：
我们把上面的结构抽象成DOM树：
从上面的图，我们可以清晰的看到根元素是html，下面有两个子元素，一个是head，另一个是body，而head和body之间是兄弟关系，以此类推，用这样的方式我们可以把页面中的所有元素都用模型抽象成一棵树。
所以，DOM简单来说就是：一套对文档的内容进行抽象和概念化的方法，提供访问和操作网页内容的方法和接口。
DOM的级别
不要以为只有ECMAScript有版本哦，DOM也是有不一样级别的。
W3C官方网址：
https://www.w3.org/standards/...
DOM分为以下：
DOM0：没有纳入标准，属于初级试验性质的，主要用途翻转图片、验证表单数据。
DOM1：1998年10月制定的标准，由两大部分组成：DOM核心和DOM HTML。
DOM2：扩展鼠标和用户界面事件、范围、遍历，增加了对 CSS支持。
DOM3：进一步扩展了DOM，新增了验证文档的方法，支持XML 1.0 规范。
Web 浏览器对 DOM 的支持
既然有级别，那么无可避免就要面对兼容问题，我们来看一下各个版本浏览器支持情况：
图片来自《JavaScript高级程序设计》
其实DOM 并不只是针对 JavaScript 的，很多别的语言也都实现了 DOM哦
浏览器对象模型（BOM）
BOM：Browser Object Model （浏览器对象模型）
提供与浏览器交互的方法和接口。
理解了DOM以后再来看BOM，就不需要这么细致的讲解啦。开发人员使用 BOM 可以控制浏览器显示的页面以外的部分，例如：获取当前浏览器版本这样的操作。
从根本上讲，BOM 只处理浏览器窗口和框架；但人们习惯上也把所有针对浏览器的 JavaScript 扩展算作 BOM 的一部分。下面就是一些这样的扩展：
弹出新浏览器窗口的功能
移动、缩放和关闭浏览器窗口的功能
提供浏览器详细信息的 navigator 对象
提供浏览器所加载页面的详细信息的 location 对象
提供用户显示器分辨率详细信息的 screen 对象
对 cookies 的支持
像 XMLHttpRequest 和 IE 的 ActiveXObject 这样的自定义对象
BOM是没有标准的，因此每个浏览器都有自己的实现。
但是又因为各大浏览器之间都有共同对象，于是这些对象就成了事实上的标准。
W3C把浏览器中 JavaScript 最基本的部分标准化，已经将 BOM 的主要方面纳入了 HTML5 的规范中。
本期就到这里为止啦~大家先把概念了解清楚，学习起来会事半功倍哦~具体的DOM、BOM有哪些操作及方法，我们后面再说哦~
下一期预告：使用JavaScript
如果你也在看红宝书，不妨在下方留言，一起交流讨论下学习心得哦
订阅号ID：Miaovclass
关注妙味订阅号：“妙味前端”，为您带来优质前端技术干货；
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/108689.html
摘要：以下内容都是一些概念性的知识点弄懂这些基本的概念是我们在世界看得更远的垫脚石诞生于年年公司开发发布时临时将名字改为当时它的主要目的是处理以前由服务端语言负责的输入验证操作随着其发展现在已不再局限于数据验证而是具备了与浏览器窗口及其内容等几乎 以下内容都是一些概念性的知识点,弄懂这些基本的概念是我们在JavaScript世界看得更远的垫脚石. Javascript Javascript诞...
摘要：浏览器只是实现的宿主环境之一，其他宿主环境包括和。年月，版发布，成为国际标准。事件定义了事件和事件处理的接口。对于已经正式纳入标准的来说，尽管各浏览器都实现了某些众所周知的共同特性，但其他特性还是会因浏览器而异。 JavaScript 是面向 Web 的编程语言，绝大多数现代网站都使用了 JavaScript，并且所有的现代 Web 浏览器（电脑，手机，平板）均包含了 JavaScri...
摘要：诞生于年，它的主要目的是处理以前由服务器端语言负责的一些输入验证操作。的不同版本又称为版次，以第版表示。目前最新的是简称文档对象模型文档对象模型，是针对但经过拓展用于的应用程序接口，。元素当浏览器不支持或被禁用时，显示里面的内容。 JavaScript诞生于1995年，它的主要目的是处理以前由服务器端语言负责的一些输入验证操作。 完整的JavaScript实现由下列三个不同的部分组成：...
摘要：下面我们说一下前端的和。现在就可以知道了，前端的其实是由组合而成。这么一对比，相信很多小伙伴对更加了解了，原来前端和服务端的如此相似，他们的基础是相同的，只是环境不同，导致他们扩展出来的东西不同而已。 前言 很多小伙伴学Node的时候，都没有好好认识她就开始疯狂追求，想一举拿下，直接在网上搜索Node实战，想知道她活好不好，想先用她建个简单博客练练手。 JavaScript和Nodej...
摘要：下面我们说一下前端的和。现在就可以知道了，前端的其实是由组合而成。这么一对比，相信很多小伙伴对更加了解了，原来前端和服务端的如此相似，他们的基础是相同的，只是环境不同，导致他们扩展出来的东西不同而已。 前言 很多小伙伴学Node的时候，都没有好好认识她就开始疯狂追求，想一举拿下，直接在网上搜索Node实战，想知道她活好不好，想先用她建个简单博客练练手。 JavaScript和Nodej...
阅读 2017·2019-08-29 16:53
阅读 2599·2019-08-29 16:07
阅读 1910·2019-08-29 13:13
阅读 3161·2019-08-26 13:57
阅读 1214·2019-08-26 13:31
阅读 2342·2019-08-26 13:22
阅读 1119·2019-08-26 11:43
阅读 1968·2019-08-23 17:14
