27、什么是DOM和BOM

最新推荐文章于 2024-09-10 10:20:06 发布

原创最新推荐文章于 2024-09-10 10:20:06 发布 · 7.7k 阅读

70 ·

CC 4.0 BY-SA版权

前端面试题目专栏收录该内容

136 篇文章

订阅专栏

本文介绍了DOM（文档对象模型）和BOM（浏览器对象模型）。DOM通过创建树表示文档，可用DOM API操作节点；BOM描述与浏览器交互的方法和接口，核心是window对象。还阐述了二者联系，即DOM的document是BOM的window子对象，也说明了它们在描述内容上的区别。

1、DOM

DOM (Document )，简称文档对象模型。通过创建树来表示文档，描述了处理网页内容的方法和接口。用DOM API可以轻松地删除、添加和替换节点。

DOM操作举例：

1）访问节点

`document.getElementById(` `"ID"` `)`	通过指定的 ID 来返回元素
`document.getElementByName(` `"name"` `)`	获取所有name特性等于指定值的元素
`document.getElementsByTagName(` `"p"` `)`	使用指定的标签名返回所有的元素列表
document.documentElement	返回存在于 XML 以及 HTML 文档中的文档根节点

2）节点的操作

creatElement(element)	创建一个新的元素节点
appendChild()	在节点列表后添加一个新的子节点
removeChild()	从一个给定元素中删除子节点

例如：将HTML代码分解为DOM节点层次图

HTML文档可以说由DOM节点构成的集合，DOM节点有:

元素节点	上图中<html>、<body>、<p>等都是元素节点，即标签。
文本节点	向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本
属性节点	元素属性，如<a>标签的链接属性href="http://www.baidu.com"

2、BOM

BOM (browser object model)，简称浏览器对象模型。描述了与浏览器进行交互的方法和接口

BOM的核心是window，而window对象又具有双重角色，它既是通过js访问浏览器窗口的一个接口，又是一个Global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都以window作为其global对象。

通常浏览器特定的JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括：

弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口大小
提供 Web 浏览器详细信息的定位对象
提供用户屏幕分辨率详细信息的屏幕对象
对 cookie 的支持
IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象

例如：

window.close(); //关闭窗口
window.alert( "message" ); //弹出一个具有OK按钮的系统消息框，显示指定的文本

3、DOM与BOM的联系和区别

1）联系

从window.document已然可以看出，DOM的最根本的对象是BOM的window对象的子对象document。推理如下：

js是通过访问BOM对象来访问、控制、修改客户端(浏览器)。
由于BOM的window包含了document，window对象的属性和方法是可以直接使用而且被感知的，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。
因为document对象又是DOM模型的根节点，可以说BOM包含了DOM(对象)。
浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。