HTML DOM 教程学习笔记

什么是 HTML DOM？

HTML DOM（HTML Document Object Model）是 HTML 页面中的树形结构，每个 HTML 元素都是文档对象模型（DOM）中的一个节点。HTML DOM 可以让我们使用 JavaScript 来操作 HTML 元素。

如何访问 HTML DOM？

在 JavaScript 中，我们可以使用 document 对象来访问 HTML DOM。例如，要获取 HTML 页面中的元素，可以使用以下代码：

javascriptCopy Code
var myElement = document.getElementById("myId");

上面的代码将返回具有 id 属性等于 "myId" 的 HTML 元素。

如何操作 HTML 元素？

我们可以使用 HTML DOM 来操作 HTML 元素。例如，要更改 HTML 元素的文本内容，可以使用以下代码：

javascriptCopy Code
document.getElementById("myId").innerHTML = "新内容";

上面的代码将把具有 id 属性等于 "myId" 的 HTML 元素的文本内容更改为 "新内容"。

HTML DOM 中的事件

在 HTML DOM 中，事件表示 HTML 元素上发生的事情，比如用户单击了一个按钮或者点击了一个链接。我们可以使用 JavaScript 来定义和处理这些事件。

例如，在以下代码中，当用户点击按钮时，将显示一条消息：

htmlCopy Code
<button id="myButton">点击我</button>
<script>
document.getElementById("myButton").addEventListener("click", function() {
  alert("按钮被点击了！");
});
</script>

练习：改变 HTML 元素样式

以下代码会把 HTML 页面中 id 为 "myDiv" 的元素的背景颜色更改为红色：

htmlCopy Code
<div id="myDiv">这是一个 div 元素。</div>
<script>
document.getElementById("myDiv").style.backgroundColor = "red";
</script>

练习：向 HTML 页面添加新元素

以下代码创建一个新的 p 元素，并将其添加到 HTML 页面中：

htmlCopy Code
<button id="myButton">点击我</button>
<script>
document.getElementById("myButton").addEventListener("click", function() {
  var newPara = document.createElement("p");
  var paraText = document.createTextNode("这是一个新段落。");
  newPara.appendChild(paraText);
  document.body.appendChild(newPara);
});
</script>

结论

通过 HTML DOM，我们可以使用 JavaScript 来访问、操作和更新 HTML 元素，从而实现更丰富的用户交互体验。