DOM
DOM（文档对象模型）是一个编程接口，它表示HTML和XML文档的结构，并允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM将文档分解为不同的节点和元素，每个节点都有其自己的属性和方法，用于操作和访问文档中的数据。
### DOM的核心功能
1. **节点访问**：DOM通过树形结构访问文档中的每个元素，每个元素都可以通过标签名、ID或名称来唯一标识。
2. **元素修改**：用户可以通过DOM的API修改文档中元素的文本内容、属性和样式。
3. **事件处理**：DOM支持事件处理机制，允许开发者响应用户的交互，如点击、鼠标悬停等。
4. **列表和集合**：DOM提供了一套丰富的集合接口，如遍历、查找和过滤元素的集合。
5. **样式和主题应用**：DOM可以用来更改文档中元素的颜色、字体、背景等样式，以及应用全局的主题或CSS。
6. **性能优化**：通过DOM的某些操作，如组合和重排，可以提高页面的性能，减少页面的重绘和回流。
### 常用的DOM API
1. **getElementById**：根据ID获取元素。
2. **getElementsByClassName**：根据类名获取多个元素。
3. **getElementsByTagName**：根据标签名获取多个元素。
4. **querySelector**：根据CSS选择器获取单个元素。
5. **querySelectorAll**：根据CSS选择器获取多个元素。
6. **createElement**：创建新的HTML元素。
7. **appendChild**：在指定节点后添加子节点。
8. **removeChild**：从指定节点删除子节点。
9. **insertBefore**：在指定节点前插入新节点。
10. **replaceChild**：用新节点替换指定节点。
11. **forEach**：对集合中的每个节点执行特定操作。
12. **addEventListener**：为元素添加事件监听器。
13. **removeEventListener**：移除元素上的事件监听器。
### DOM的操作示例
假设我们有以下简单的HTML结构：
```html
DOM Example
```
在app.js文件中，我们可以使用DOM API来操作上述HTML结构：
```javascript
// 获取列表和按钮元素
const list = document.getElementById('list');
const addButton = document.getElementById('add');
// 添加新元素到列表
function addListItem(newText) {
const newItem = document.createElement('li');
newItem.textContent = newText;
list.appendChild(newItem);
}
// 处理按钮点击事件
addButton.addEventListener('click', () => {
addListItem('New item');
});
// 更新列表项
function updateListItemText(index, newText) {
const items = list.getElementsByTagName('li');
items[index].textContent = newText;
}
// 更新第三个列表项
updateListItemText(2, 'Updated item 3');
```
通过上述示例，我们可以看到DOM的强大功能和它在实现复杂动态网页方面的应用价值。通过DOM的操作，我们可以对网页的内容、结构和样式进行精细的控制，从而提供更加丰富和互动的用户体验。