操作 HTML 元素：JavaScript 与 DOM 交互
JavaScript 提供了强大的功能来操作 HTML 文档，这主要通过文档对象模型（DOM）实现。DOM 是 HTML 文档的编程接口，它将页面上的元素表示为对象，允许JavaScript动态地访问和操作它们。
选择元素
在操作元素之前，首先需要选择它们。以下是几种常见的选择元素的方法：
document.getElementById(id): 通过元素的ID选择元素。document.getElementsByTagName(name): 根据标签名选择元素集合。document.getElementsByClassName(name): 根据类名选择元素集合。document.querySelector(selector): 使用CSS选择器返回文档中匹配的第一个元素。document.querySelectorAll(selector): 使用CSS选择器返回所有匹配的元素集合。
操作元素
一旦选择了元素，就可以对它们执行各种操作：
更改内容:
element.innerHTML: 获取或设置元素的HTML内容。element.textContent: 获取或设置元素的文本内容。
样式操作:
element.style.property: 直接设置内联样式。
属性操作:
element.getAttribute(name): 获取元素的属性值。element.setAttribute(name, value): 设置元素的属性值。element.removeAttribute(name): 移除元素的属性。
事件监听:
element.addEventListener(type, listener): 为元素添加事件监听器。
尺寸和布局:
element.offsetWidth和element.offsetHeight: 获取元素的布局尺寸（包括边框和内边距）。element.clientWidth和element.clientHeight: 获取元素的宽度和高度（不包括垂直滚动条）。
类操作:
element.classList.add(name): 向元素添加类。element.classList.remove(name): 从元素移除类。element.classList.toggle(name): 切换元素的类。
代码示例
以下是一个示例，展示了如何使用JavaScript操作HTML元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作 HTML 元素示例</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div id="myDiv">Hello, World!</div>
<button id="changeTextBtn">更改文本</button>
<button id="changeStyleBtn">更改样式</button>
<button id="addClassBtn">添加类</button>
<script>
// 选择元素
var myDiv = document.getElementById('myDiv');
var changeTextBtn = document.getElementById('changeTextBtn');
var changeStyleBtn = document.getElementById('changeStyleBtn');
var addClassBtn = document.getElementById('addClassBtn');
// 更改文本内容
changeTextBtn.addEventListener('click', function() {
myDiv.textContent = '文本已更改！';
});
// 更改样式
changeStyleBtn.addEventListener('click', function() {
myDiv.style.color = 'red';
myDiv.style.fontSize = '20px';
});
// 添加类
addClassBtn.addEventListener('click', function() {
myDiv.classList.add('highlight');
});
</script>
</body>
</html>
在这个示例中，我们有一个 div 元素和三个按钮。点击这些按钮将分别更改 div 的文本内容、样式和类。
