JavaScript、HTML 与 DOM 实例解析

引言

JavaScript、HTML 和 DOM 是构建网页和应用程序的三大基石。HTML 提供了网页的结构，CSS 负责样式，而 JavaScript 则赋予了网页动态交互的能力。DOM（文档对象模型）则是 JavaScript 操作 HTML 和 XML 文档的接口。本文将通过具体实例，深入解析 JavaScript、HTML 和 DOM 的结合使用，帮助读者更好地理解和应用这些技术。

HTML 结构与 DOM 操作

HTML 结构

首先，我们来看一个简单的 HTML 页面结构：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>JavaScript DOM 实例</title>
</head>
<body>
    <h1>JavaScript DOM 实例</h1>
    <p>这是一个段落。</p>
    <button id="myButton">点击我</button>
</body>
</html>

在这个例子中，我们有一个标题（<h1>）、一个段落（<p>）和一个按钮（<button>）。

DOM 操作

接下来，我们将使用 JavaScript 操作这个 DOM 结构。以下是一个简单的例子：

javascript 复制代码

// 获取按钮元素
var button = document.getElementById("myButton");

// 为按钮添加点击事件监听器
button.addEventListener("click", function() {
    alert("按钮被点击了！");
});

在这个例子中，我们首先使用 getElementById 方法获取了按钮元素，然后为这个按钮添加了一个点击事件监听器。当按钮被点击时，会弹出一个警告框。

JavaScript 与 HTML 交互

JavaScript 控制HTML元素

在上面的例子中，我们通过 JavaScript 控制了按钮的行为。现在，我们将看看如何使用 JavaScript 控制其他 HTML 元素。

javascript 复制代码

// 获取段落元素
var paragraph = document.getElementById("myParagraph");

// 修改段落文本
paragraph.innerHTML = "新的段落内容。";

在这个例子中，我们获取了段落元素，并修改了它的 innerHTML 属性，从而改变了段落的内容。

JavaScript 动态创建元素

除了控制现有元素，我们还可以使用 JavaScript 动态创建新的 HTML 元素。

javascript 复制代码

// 创建一个新的段落元素
var newParagraph = document.createElement("p");

// 设置段落内容
newParagraph.innerHTML = "这是动态创建的段落。";

// 将新段落添加到文档中
document.body.appendChild(newParagraph);

在这个例子中，我们创建了一个新的段落元素，设置了内容，并将其添加到了文档的 body 中。

总结

本文通过具体实例，展示了 JavaScript、HTML 和 DOM 的结合使用。通过这些实例，读者可以了解到如何使用 JavaScript 操作 HTML 元素，以及如何控制网页的动态交互。希望本文能够帮助读者更好地理解和应用这些技术。