JavaScript HTML DOM 实例
JavaScript HTML DOM 实例
JavaScript 的 HTML DOM（文档对象模型）允许您通过脚本来控制 HTML 页面。DOM 是 HTML 文档的编程接口，它将 Web 页面与编程语言连接起来，使得开发者可以改变页面中的内容、结构和样式。在这篇文章中，我们将通过一系列实例来探讨如何使用 JavaScript 操作 HTML DOM。
DOM 基础
在开始操作 DOM 之前，我们需要了解一些基本概念。DOM 将 HTML 文档视为树结构，也称为节点树。在这个树结构中，每个节点都代表文档中的一个部分，例如元素、属性、文本等。
节点类型
- 元素节点：HTML 页面中的所有标签，例如
<body>、<div>等。 - 属性节点：元素的属性，例如
id="demo"。 - 文本节点：包含在元素中的文本内容。
- 注释节点：HTML 页面中的注释。
访问 DOM 节点
JavaScript 提供了多种方法来访问和操作 DOM 节点。以下是一些基本的方法：
document.getElementById(id)：通过元素 ID 获取元素。document.getElementsByTagName(name)：通过标签名获取元素列表。document.getElementsByClassName(name)：通过类