HTML DOM 修改学习笔记
什么是HTML DOM？
HTML DOM（文档对象模型）定义了访问和操作HTML文档的方法。它将HTML文档表示为树形结构，通过DOM，开发者可以轻松地访问和修改HTML元素、属性和文本。
修改HTML元素
使用DOM，我们可以轻松地修改HTML元素的内容、样式和属性。以下是一些常用的方法：
修改元素内容
要修改元素的内容，可以使用 innerHTML 属性。例如：
javascriptCopy Codedocument.getElementById("myElement").innerHTML = "新的内容";
修改元素样式
要修改元素的样式，可以使用 style 属性。例如：
javascriptCopy Codedocument.getElementById("myElement").style.color = "red";
修改元素属性
要修改元素的属性，可以使用 setAttribute() 方法。例如：
javascriptCopy Codedocument.getElementById("myElement").setAttribute("src", "newImage.jpg");
实例演示
以下是一个简单的实例，演示如何使用DOM修改HTML元素：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>HTML DOM 修改学习笔记</title>
</head>
<body>
<h1 id="myHeading">旧的标题</h1>
<p id="myParagraph">旧的段落</p>
<button onclick="changeContent()">修改内容</button>
<button onclick="changeStyle()">修改样式</button>
<script>
function changeContent() {
document.getElementById("myHeading").innerHTML = "新的标题";
document.getElementById("myParagraph").innerHTML = "新的段落";
}
function changeStyle() {
document.getElementById("myHeading").style.color = "red";
document.getElementById("myParagraph").style.fontSize = "24px";
}
</script>
</body>
</html>
在这个实例中，我们定义了一个标题、一个段落和两个按钮。通过点击这些按钮，可以分别修改元素的内容和样式。
总结
使用HTML DOM，我们可以轻松地修改HTML文档的内容、样式和属性。掌握DOM的基本方法，可以帮助我们更加高效地开发Web应用程序。