JavaScript之DOM与BOM

---

一、DOM是什么？

DOM (文档对象模型)：它是用于处理HTML或XML文档的标准方式。它将整个网页视为一个由节点构成的树状结构，每个元素、属性、文本等都是节点的一部分。开发者可以使用DOM API（JavaScript提供的API）来动态地访问、修改和操作这个树，例如获取元素、添加元素、改变样式等。通过DOM，前端开发者可以实现页面内容的动态更新。

常用方法

方法	描 述
document.getElementById()	通过 id 获取元素
document.getElementByTagName()	通过标签名获取元素
document.getElementByClassName()	通过 class 获取元素（返回数组）
document.getElementByName()	通过 name 获取元素
document.querySelector()	通过选择器获取第一个元素
document.querySelectorAll()	通过选择器获取所有元素
document.createElement()	创建元素节点
document.createTextNode()	创建文本节点
document.write()	输出内容
document.writeln()	输出内容并换行

例：

二、BOM是什么？

BOM (浏览器对象模型)：则是指浏览器提供的一组对象和服务，主要用于与用户界面交互和管理浏览器状态。BOM关注的是浏览器窗口、历史记录、位置、设备等，比如window对象、location对象等。虽然BOM也是JavaScript可以操作的对象，但它更多的是关于浏览器本身而非文档的内容。

常用方法

方法	描 述
alert()	显示一个警告框
prompt()	显示可提示用户输入的对话框
confirm()	显示一个有确认和取消按钮的对话框
open()	打开一个新的浏览器窗口
close()	关闭浏览器
print()	打印当前窗口内容

三、DOM与BOM的关系

DOM的最根本的对象是BOM的window对象的子对象，所以DOM也可以看作是BOM的一部分
例：console.log(window.document === document);
因为document是DOM的根节点，而以上代码又表明：document在window对象中是作为其一个属性而存在的，因此从这个角度来说，BOM包含了DOM
浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档
只不过区别是：DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口

四、总结

1.DOM 是文档对象模型，BOM是浏览器对象模型

2.DOM就是把文档当做一个对象来看待，BOM是把浏览器当做一个对象来看待

3.DOM的顶级对象是document（实际上是window.document），BOM的顶级对象是window

4.DOM 主要学习的是操作页面元素，BOM学习的是浏览器窗口交互的一些对象

5.DOM是W3C标准规范，BOM是浏览器厂商在各自浏览器上定义的，兼容性较差