DOM && BOM

DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
DOM的根是Document

HTML DOM 模型被构造为对象的树：

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

1. 通过 id 查找 HTML 元素（getElementById）
2. 通过标签名查找 HTML 元素（getElementsByTagName）
3. 通过类名找到 HTML 元素（getElementsByClassName）

改变HTML

1. 改变 HTML 输出流(document.write(Date());)
2. 改变 HTML 内容(document.getElementById(id).innerHTML=新的 HTML)
3. 改变 HTML 属性(document.getElementById(id).attribute=新属性值

改变HTML样式

document.getElementById(id).style.property=新样式

---

BOM

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。BOM是有兼容问题，属于树型结构。 BOM的根就是Window

Window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("header");
// 相同
document.getElementById("header");

https://www.runoob.com/js/js-cookies.html

BOM https://www.cnblogs.com/xmjt/p/12650436.html

浏览器对象模型bom的作用