JavaScript 通过 document 获取和操作 DOM 元素
DOM 是 文档对象模型（Document Object Model），它将 HTML 或 XML 文档 视为一个 树形结构，其中每个 HTML 标签、文本内容、属性 等都被看作是 树上的 节点。
通过 DOM，JavaScript 可以 访问 和 操作 网页的 内容、结构 和 样式。
1 获取 DOM 元素的方法
1.1 ID
使用 document.getElementById() 方法。这是最常用的方法之一，它返回具有 指定 ID 的 元素。
1.2 标签名
可以使用 document.getElementsByTagName() 方法。它返回一个包含 所有指定标签名 的 元素 的 HTMLCollection（类似于 数组）。
1.3 类名
使用 document.getElementsByClassName() 方法。它返回一个包含 所有具有指定类名 的 元素 的 HTMLCollection。
1.4 CSS 选择器
document.querySelector() 方法，返回 匹配指定 CSS 选择器 的 第一个 元素。
document.querySelectorAll() 方法，返回 匹配指定 CSS 选择器 的 所有元素 的 NodeList（类似于 数组）。
2 操作 DOM 元素的内容
2.1 修改文本内容
对于获取到的元素，可以通过 innerHTML 属性 来修改其 内部的 HTML 内容。
也可以使用 textContent 属性 来仅修改 元素内的 纯文本内容，它会 忽略 HTML 标签。
2.2 修改属性
可以修改 元素的 各种属性，如src（对于<img>标签）、href（对于<a>标签）等。
3 操作 DOM 元素的结构
3.1 创建新元素
使用 document.createElement() 方法 来 创建 新的 元素。
3.2 添加元素到 DOM 树中
可以使用 appendChild() 方法将 新元素 添加到 另一个元素 的 子节点列表 的 末尾。
也可以使用 insertBefore(newElement, targetElement) 方法将 新元素 插入到 指定元素 之前。
3.3 删除元素
可以使用 removeChild() 方法来删除元素。
