浅谈Dom和Bom（清晰易懂版）

DOM（文档对象模型）

DOM 是浏览器提供的一种操作网页内容和结构的 API，它将 Web 页面表示为一个树形结构，其中每一个 HTML 元素都是一个节点，可以通过 DOM API 对其进行访问和操作。DOM API 包括了一系列方法和属性，可以用来修改网页的内容、样式和结构，实现动态效果和用户交互。

DOM 树的根节点是 document 对象，它代表了整个 HTML 文档，可以通过 document 对象访问到 HTML 元素、文本节点、属性节点等。

DOM API 可以分为以下几类：

1. 节点遍历和选择器：通过 document 对象的方法和属性，可以遍历和选择 DOM 树中的节点，如 getElementById()、getElementsByTagName()、querySelector()、querySelectorAll() 等。

2. 节点操作：通过 document 对象的方法和属性，可以对 DOM 树中的节点进行操作，如 createElement()、appendChild()、insertBefore()、removeChild()、setAttribute()、getAttribute() 等。

3. 样式操作：通过 document 对象的 CSS 属性，可以对 DOM 元素的样式进行操作，如 style、className、classList 等。

4. 事件处理：通过 document 对象的事件处理属性和方法，可以对 DOM 元素的事件进行处理，如 onclick、onmouseover、addEventListener()、removeEventListener() 等。

BOM（浏览器对象模型）

BOM 是浏览器提供的一种操作浏览器窗口和其他浏览器相关的对象的 API，它包括了窗口、文档、历史记录、位置、屏幕等对象，可以通过 BOM API 对其进行访问和操作。BOM API 包括了一系列方法和属性，可以用来控制浏览器的行为、操作浏览器窗口、获取用户信息等。

BOM API 可以分为以下几类：

1. 窗口操作：通过 window 对象的方法和属性，可以对浏览器窗口进行操作，如 open()、close()、resizeTo()、moveTo() 等。

2. 文档操作：通过 document 对象的方法和属性，可以对浏览器文档进行操作，如 write()、writeln()、cookie、readyState 等。

3. 历史记录操作：通过 history 对象的方法和属性，可以对浏览器的历史记录进行操作，如 back()、forward()、go() 等。

4. 位置操作：通过 location 对象的方法和属性，可以获取当前页面的 URL 和对 URL 进行操作，如 href、protocol、hostname、pathname 等。

5. 屏幕操作：通过 screen 对象的方法和属性，可以获取屏幕的信息，如 width、height、colorDepth、availWidth、availHeight 等。

需要注意的是，BOM API 并没有被标准化，不同浏览器的实现可能会有所不同，因此在使用 BOM API 时要特别注意浏览器兼容性问题。

总之，DOM 和 BOM 是 Web 开发中两个重要的概念，分别代表了文档对象模型和浏览器对象模型。通过使用 DOM 和 BOM API，可以对 Web 页面和浏览器进行灵活的操作和控制，实现更丰富、更复杂的 Web 应用程序。