3.5 DOM操作
在前端开发中，DOM（Document Object Model）是一种用于表示和操作HTML文档的标准。通过JavaScript，我们可以使用DOM API来访问和修改HTML文档的元素、属性和样式，以及响应用户的交互事件。
3.5.1 获取和修改元素
DOM提供了多种方法来获取和修改HTML元素。
获取元素
要获取一个HTML元素，可以使用以下方法：
document.getElementById(id): 通过元素的id属性获取单个元素。document.getElementsByClassName(className): 通过元素的类名获取一个元素集合。document.getElementsByTagName(tagName): 通过元素的标签名获取一个元素集合。document.querySelector(selector): 使用CSS选择器获取单个元素。document.querySelectorAll(selector): 使用CSS选择器获取多个元素。
修改元素
一旦获取了元素，我们可以使用以下属性和方法来修改元素的内容、样式和属性：
element.innerHTML: 获取或设置元素的HTML内容。element.innerText: 获取或设置元素的文本内容。element.style.property: 获取或设置元素的样式属性。element.setAttribute(attribute, value): 设置元素的属性值。element.getAttribute(attribute): 获取元素的属性值。
下面是一个示例代码，演示了如何获取一个元素并修改其内容和样式：
// 获取元素
const heading = document.getElementById('heading');
// 修改内容
heading.innerHTML = 'Hello, DOM!';
heading.style.color = 'red';3.5.2 创建和删除元素
除了修改现有的元素，我们还可以使用DOM API来创建和删除元素。
创建元素
要创建一个新的HTML元素，可以使用以下方法：
document.createElement(tagName): 创建一个指定标签名的新元素。
添加和移除元素
一旦创建了一个新元素，可以使用以下方法将其添加到文档中，或从文档中移除：
parentElement.appendChild(element): 将一个元素作为子元素添加到父元素中。parentElement.removeChild(element): 从父元素中移除一个子元素。
以下是一个示例代码，演示了如何创建新元素并将其添加到文档中：
// 创建新元素
const paragraph = document.createElement('p');
paragraph.innerText = 'This is a new paragraph.';
// 获取父元素
const container = document.getElementById('container');
// 将新元素添加到父元素中
container.appendChild(paragraph);3.5.3 事件处理
JavaScript的DOM操作中最重要的部分之一是事件处理。通过事件处理，我们可以捕捉和响应用户在网页上的交互操作。
添加事件监听器
要添加事件监听器，可以使用以下方法：
element.addEventListener(event, handler): 为元素添加事件监听器。
以下是一个示例
代码，演示了如何为按钮元素添加一个点击事件监听器：
// 获取按钮元素
const button = document.getElementById('myButton');
// 添加点击事件监听器
button.addEventListener('click', function() {
alert('Button clicked!');
});常见的DOM事件
在前端开发中，有许多常见的DOM事件可以用于响应用户的操作，例如：
click: 当用户点击元素时触发。mouseenter: 当鼠标进入元素时触发。mouseleave: 当鼠标离开元素时触发。keydown: 当用户按下键盘上的任意键时触发。submit: 当表单提交时触发。
可以根据需要选择适当的事件来响应用户的操作。
以上是关于DOM操作的简要介绍和示例代码。通过掌握DOM操作，你可以动态地修改网页内容、样式和交互行为，实现更丰富的用户体验。