DOM与BOM模块化基础汇总

前端的发展史上，从逻辑语言、声明式语言、到函数式语言，直至如今的框架化、组件化，计算机技术始终处在快速变化之中，前端的发展速度更可谓一日千里。

前端开发中，最基础的HTML、CSS、JavaScript这“三大件”我们已经不再陌生，但想要成为一名合格的前端工程师，不仅要掌握这“三大件”，还需要了解并掌握DOM和BOM这两个模块。

DOM（Document Object Model）

DOM是文档对象模型的缩写，它是一个面向对象模型，可以将HTML文档表示为一个对象树。有了这个对象树，我们就可以使用JavaScript来访问和操作HTML元素，从而实现各种交互效果。

DOM的基础知识

• DOM节点： DOM节点是DOM树中的基本单位，它可以是元素节点、文本节点、注释节点等。
• 元素节点： 元素节点代表HTML元素，它是DOM树中的主要节点类型。
• 文本节点： 文本节点代表HTML元素中的文本内容。
• 注释节点： 注释节点代表HTML元素中的注释内容。

DOM的操作

• 获取DOM元素： 我们可以使用JavaScript的各种方法来获取DOM元素，常用的方法包括getElementById()、getElementsByTagName()、getElementsByClassName()等。
• 操作DOM元素： 获取到DOM元素后，我们可以使用各种方法来操作它们，常用的方法包括innerHTML、style、classList等。
• 事件处理： DOM元素可以绑定事件处理函数，当事件发生时，就会触发对应的事件处理函数。

BOM（Browser Object Model）

BOM是浏览器对象模型的缩写，它是一个面向对象模型，可以提供与浏览器交互的各种方法和属性。

BOM的基础知识

• window对象： window对象是BOM的根对象，它代表浏览器窗口。
• document对象： document对象是BOM的另一个重要对象，它代表HTML文档。
• navigator对象： navigator对象提供有关浏览器的信息，例如浏览器名称、版本、语言等。
• location对象： location对象提供有关当前URL的信息，例如URL的路径、查询字符串等。
• history对象： history对象提供有关浏览器历史记录的信息，例如可以前进、后退、刷新等。

BOM的操作

• 打开新窗口： 可以使用window.open()方法来打开一个新窗口。
• 关闭窗口： 可以使用window.close()方法来关闭当前窗口。
• 跳转到新页面： 可以使用location.href属性来跳转到新页面。
• 后退、前进、刷新： 可以使用history.back()、history.forward()、history.reload()方法来实现后退、前进、刷新等操作。

BOM与DOM的关系

BOM和DOM是两个独立的模块，但它们之间存在着密切的关系。BOM可以提供与浏览器交互的方法和属性，而DOM可以提供对HTML文档的访问和操作。

总结

DOM和BOM是前端开发的基础知识，掌握这两个模块可以帮助我们更好地理解和使用JavaScript，从而实现各种交互效果。

希望本文对您有所帮助，如果您有任何问题，欢迎随时提问。