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)
:通过类