在这个练习中，我们将学习如何使用 DOM（文档对象模型）来操作网页元素。以下是几个基础练习，帮助你更好地理解 DOM 的使用。

练习目标

  • 理解 DOM 的基本概念
  • 使用 JavaScript 操作 DOM 元素
  • 实现动态内容更新

练习内容

  1. 获取元素: 使用 document.getElementById 或 document.querySelector 获取页面上的元素。
  2. 修改元素: 修改元素的文本内容、属性或样式。
  3. 添加元素: 创建新的 DOM 元素并添加到页面中。
  4. 移除元素: 从页面中移除元素。

示例代码

// 获取元素
var element = document.getElementById('myElement');

// 修改文本内容
element.textContent = 'Hello, World!';

// 修改样式
element.style.color = 'red';

// 创建新元素
var newElement = document.createElement('p');
newElement.textContent = '这是一个新元素。';

// 添加到页面
document.body.appendChild(newElement);

// 移除元素
document.body.removeChild(element);

扩展阅读

如果你对 DOM 操作有更深入的了解，可以阅读以下内容：

JavaScript