DOM与BOM

DOM

DOM（Document Object Model，文档对象模型），用于将HTML和XML文档表示为树结构，从而允许程序和脚本动态地访问和更新文档的内容、结构和样式。

1. 树结构：DOM将文档表示为一个节点树，每个节点代表文档中的一个元素或一部分数据。

2. 节点类型：

   • 元素节点（Element）：如<div>、<p>、<span>等。

   • 属性节点（Attribute）：如class、id、url、name等。

   • 文本节点（Text）：元素的文本内容。

   • 注释节点（Comment）：文档注释。

   • 文档节点（Document）：树的根部，代表整个文档。

3. 动态访问：通过DOM，JavaScript可以访问和修改文档的任何部分。例如，可以更改元素的内容、样式或属性。

4. 事件处理：DOM允许JavaScript监听和响应用户事件，如点击、键盘输入等。

5. 跨平台：DOM是独立于浏览器和平台的，几乎所有现代浏览器都支持DOM。

6. CSS选择器：DOM允许使用CSS选择器来查找和操作元素，这使得选择特定元素更加方便和直观。

7. DOM操作：常见的DOM操作包括：

   • 创建新节点（createElement、createTextNode）。

   • 插入节点（appendChild、insertBefore）。

   • 删除节点（removeChild）。

   • 替换节点（replaceChild）。

   • 查找节点（getElementById、getElementsByClassName、querySelector、querySelectorAll等）。

BOM

BOM（Browser Object Model，浏览器对象模型），BOM提供了对浏览器窗口和框架的操作，以及对浏览器功能的访问。

1. 窗口（Window）：

   • 窗口对象是BOM的顶层对象，代表浏览器的窗口或标签页。

   • 它提供了访问浏览器功能的方法和属性，如window.open()、window.close()、window.alert()等。

2. 历史记录（History）：

   • 历史对象允许JavaScript访问浏览器的历史记录，可以添加、修改或删除历史记录条目。

3. 导航（Navigation）：

   • 浏览器提供了前进和后退的功能，可以通过window.history.forward()和window.history.back()来控制。