JavaScript DOM 编程：操纵 HTML 和 CSS133

文档对象模型 (DOM) 是一个编程接口，允许 JavaScript 访问和操作 HTML 和 CSS 文档内容。通过 DOM，您可以动态地修改网页的结构、样式和行为，从而创建交互式和用户友好的 web 应用程序。

访问 DOM 元素

可以使用以下方法访问 DOM 元素：
getElementById(id)：根据 ID 获取元素。
getElementsByTagName(name)：根据标签名获取元素集合。
getElementsByClassName(name)：根据类名获取元素集合。
querySelector(selector)：使用 CSS 选择器获取第一个匹配元素。
querySelectorAll(selector)：使用 CSS 选择器获取所有匹配元素。

修改元素属性

您可以使用以下属性修改元素属性：
innerHTML：获取或设置元素的 HTML 内容。
textContent：获取或设置元素的文本内容（不包括 HTML）。
style：获取或设置元素的 CSS 样式。
attributes：获取或设置元素的属性。

添加和删除元素

您可以使用以下方法添加和删除元素：
createElement(name)：创建一个新的 HTML 元素。
appendChild(element)：将元素附加到另一个元素的末尾。
insertBefore(newElement, referenceElement)：将新元素插入到指定元素之前。
removeChild(element)：从父元素中删除元素。

事件处理

DOM 事件处理允许您响应用户的交互，例如单击、移动和键盘输入。您可以使用以下方法：
addEventListener(event, handler)：为元素添加事件侦听器。
removeEventListener(event, handler)：移除事件侦听器。

DOM 遍历

您可以使用以下方法遍历 DOM：
parentNode：获取元素的父节点。
childNodes：获取元素的子节点集合。
nextSibling：获取元素的下一个兄弟节点。
previousSibling：获取元素的前一个兄弟节点。

DOM 操作范例

以下是使用 DOM 操作的示例代码：```javascript
// 获取元素
const title = ('title');
// 修改元素属性
= '新的标题';
= 'red';
// 添加元素
const newElement = ('p');
= '新段落';
(newElement);
// 删除元素
(newElement);
// 添加事件侦听器
('click', function() {
('点击了文档 body');
});
```