JavaScript HTML DOM 实例学习笔记

1. 简介

JavaScript 是一门常用的编程语言，可以通过它来操作 HTML 页面中的内容。HTML DOM（Document Object Model，文档对象模型）则是一种 API，用于在 HTML 页面中操作任何元素。

在本文中，我们将介绍一些使用 JavaScript 操作 HTML DOM 的实例。

2. 实例

2.1 修改元素的文本内容

假设有一个 HTML 页面中有一个 <p> 元素，如下所示：

htmlCopy Code
<p id="example">Hello World!</p>

下面的 JavaScript 代码会将元素的文本内容修改为 "Goodbye World!"：

javascriptCopy Code
document.getElementById("example").innerHTML = "Goodbye World!";

2.2 修改元素的样式

假设有一个 HTML 页面中有一个 <div> 元素，如下所示：

htmlCopy Code
<div id="example" style="background-color: yellow;">Hello World!</div>

下面的 JavaScript 代码会将元素的背景颜色修改为绿色：

javascriptCopy Code
document.getElementById("example").style.backgroundColor = "green";

2.3 修改元素的属性值

假设有一个 HTML 页面中有一个 <img> 元素，如下所示：

htmlCopy Code
<img id="example" src="image.jpg">

下面的 JavaScript 代码会将元素的 src 属性值修改为另一个图片的路径：

javascriptCopy Code
document.getElementById("example").src = "another-image.jpg";

2.4 创建新元素

下面的 JavaScript 代码会创建一个新的 <p> 元素，并将其添加到页面中：

javascriptCopy Code
var newParagraph = document.createElement("p");
var text = document.createTextNode("This is a new paragraph.");
newParagraph.appendChild(text);

var container = document.getElementById("container");
container.appendChild(newParagraph);

3. 结论

以上是一些使用 JavaScript 操作 HTML DOM 的实例。通过学习这些实例，您可以更好地理解和掌握 JavaScript 和 HTML DOM 的基本技能。