什么是DOM（文档对象模型）？如何使用JavaScript来操作DOM元素？
DOM（文档对象模型）是一种表示HTML或XML文档的编程接口，通过DOM可以访问、添加、删除文档的所有元素。在网页中，每个HTML元素都作为一个对象在DOM中表示，通过JavaScript可以轻松地操作这些DOM元素，从而实现页面的交互和动态效果。
下面是一个简单的JavaScript代码示例，展示了如何使用JavaScript来操作DOM元素：
<!DOCTYPE html>
<html>
<head>
<title>操作DOM元素示例</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h1 id="heading">这是一个标题</h1>
<p id="paragraph">这是一个段落</p>
<button id="btn">点击我</button>
<script>
// 获取DOM元素
const heading = document.getElementById('heading');
const paragraph = document.getElementById('paragraph');
const button = document.getElementById('btn');
// 添加点击事件监听器
button.addEventListener('click', function() {
// 修改元素文本内容
heading.textContent = '标题被修改了！www.sucai8.cn 素材8网';
// 添加CSS类
paragraph.classList.add('highlight');
});
// 创建新的元素并添加到页面中
const newParagraph = document.createElement('p');
newParagraph.textContent = '这是新添加的段落';
document.body.appendChild(newParagraph);
</script>
</body>
</html>
在这个示例中，首先通过`document.getElementById`方法获取了页面中的标题、段落和按钮元素，然后通过`addEventListener`方法给按钮元素添加了一个点击事件监听器。当按钮被点击时，修改了标题的文本内容，并为段落添加了`highlight`类，从而改变了段落的背景颜色。
接着我们使用`document.createElement`方法创建了一个新的段落元素，并通过`textContent`属性设置了文本内容，最后通过`appendChild`方法将新的段落元素添加到页面中。
通过JavaScript操作DOM，我们可以实现页面元素的动态更新、事件处理等各种交互效果，从而使网页更加动态和具有交互性。