1. 获取元素
使用JavaScript可以通过多种方式获取HTML元素，例如通过ID、类名、标签名等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM 示例</title>
</head>
<body>
<!-- HTML 元素 -->
<div id="myDiv">这是一个 div 元素</div>
<script>
// 通过 ID 获取元素
var myElement = document.getElementById("myDiv");
console.log(myElement.innerHTML); // 输出元素的内容
</script>
</body>
</html>
2. 修改元素内容
使用DOM，你可以轻松地修改HTML元素的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM 示例</title>
</head>
<body>
<!-- HTML 元素 -->
<div id="myDiv">原始内容</div>
<script>
// 修改元素的内容
var myElement = document.getElementById("myDiv");
myElement.innerHTML = "新的内容";
</script>
</body>
</html>
3. 创建新元素
你可以使用DOM创建新的HTML元素，并将其添加到文档中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM 示例</title>
</head>
<body>
<script>
// 创建新元素
var newDiv = document.createElement("div");
newDiv.innerHTML = "这是一个新的 div 元素";
// 将新元素添加到文档中
document.body.appendChild(newDiv);
</script>
</body>
</html>
4. 添加事件监听器
通过DOM，你可以为HTML元素添加事件监听器，以便在事件发生时执行特定的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM 示例</title>
</head>
<body>
<!-- HTML 元素 -->
<button id="myButton">点击我</button>
<script>
// 添加点击事件监听器
var myButton = document.getElementById("myButton");
myButton.addEventListener("click", function() {
alert("按钮被点击了！");
});
</script>
</body>
</html>
这些例子演示了一些基本的HTML DOM操作。使用DOM，你可以动态地操作和更新网页的内容和结构。
转载请注明出处：http://www.pingtaimeng.com/article/detail/3580/JavaScript