DOM和BOM的理解

Posted 2021-03-14 hopeiscoming

 

一、DOM

DOM 全称是 Document Object Model，也就是文档对象模型。

个人理解，DOM包含三层意思：1.DOM是一个操作html的API接口  2.DOM是一个HTML结构模型  3.DOM代指该HTML模型中的对象

 

1.DOM是一个操作HTML的API接口

HTML本身是静态的，是不变的，每个标签的内容以及属性都是死的。

如果要让网页动起来，就要完成两步：第一步是思维上的转变（网页是可以动起来的），第二部是操作上的突破（如何动起来）

DOM完成了上述两步，它首先在板结的HTML上找到突破口，定义了一些可以改变的东西，之后又针对这些突破口设计了一系列API，让人们能通过这些API来操作这些元素。

 

2.DOM是一个HTML结构模型

在DOM出现之前，我想HTML文件对于很多人只不过是一段遵循特殊规则的文本，而DOM却给它建立了一个结构模型，使它立体了起来。

也就是下面这个图了

 

3.DOM代指该HTML模型中的对象

一句话概括，DOM就是上图中的那些节点。

 

 

二、BOM

 

BOM 是 Browser Object Model，浏览器对象模型。

 

简单地说，BOM和DOM一样，只不过DOM操作的是HTML中的元素，BOM是浏览器的API、操作的是浏览器（即控制浏览器的行为）

 

三、DOM与BOM的职责划分 

如下图所示，其中E区（也就是通常所说 的document，他对应开发人员写出来的一个文件夹，里面有index.html,css和jsdeng ）归 DOM 管

ABCD区归BOM管

 

四、常用对象

document是DOM的一个对象

document.title = ‘ForHope‘              ---定义文档标题

document.getElementById(‘xxx‘)    ---获取文档中的某一个元素

window，location是BOM的两个对象

window.close                                 ---关闭当前窗口

location.href ="www.baidu.com"   ---让浏览器跳转到另一个页面

 

 

 

 

参考链接：https://blog.csdn.net/zixiaomuwu/article/details/60588461