DOM操作

DOM（Document Object Model，文档对象模型）操作是指使用JavaScript对HTML文档中的元素进行访问、修改和操作的过程。

通过DOM操作，我们可以动态地改变页面的内容、样式和结构，以及响应用户的事件和交互。以下是一些常见的DOM操作示例：

1. 获取元素：使用`document.getElementById()`、`document.getElementsByClassName()`、`document.getElementsByTagName()`等方法获取文档中的元素，并通过唯一的ID、类名或标签名进行筛选。

2. 修改元素内容：使用`element.innerHTML`或`element.innerText`属性来修改元素的HTML内容或纯文本内容。例如：`document.getElementById('myElement').innerHTML = '<h1>Hello, World!</h1>';`

3. 修改元素样式：使用`element.style`属性来修改元素的CSS样式。例如：`document.getElementById('myElement').style.color = 'red';`

4. 添加和删除元素：使用`document.createElement()`方法创建新的元素，然后使用`element.appendChild()`将其添加到其他元素中。使用`element.remove()`方法从文档中移除元素。

5. 事件处理：使用`element.addEventListener()`方法添加事件监听器，来响应用户的交互行为。例如：`document.getElementById('myButton').addEventListener('click', function() {alert('Button clicked!');});`

6. 遍历和查找元素：使用`element.childNodes`和`element.querySelector()`等方法来遍历和查找文档中的元素。

通过这些常见的DOM操作，我们可以对页面进行动态的改变和交互，实现丰富的用户体验。然而，在进行DOM操作时，需要注意性能和安全性，避免频繁操作和潜在的安全风险。