DOM（Document Object Model）是操作网页元素的关键技术。以下是一些基础的 DOM 操作练习，帮助你更好地理解和掌握 DOM 的使用。

练习 1：获取元素

使用 document.getElementById() 方法获取页面中 ID 为 "myElement" 的元素。

var element = document.getElementById("myElement");

练习 2：修改元素内容

使用 .innerHTML 属性修改元素的内容。

element.innerHTML = "这是新的内容";

练习 3：添加元素

使用 .appendChild() 方法将新元素添加到页面中。

var newElement = document.createElement("div");
newElement.innerHTML = "这是一个新元素";
element.appendChild(newElement);

图片示例

下面是一个示例图片，展示了如何使用 DOM 添加图片：

image_dom

更多资源

想要了解更多关于 DOM 的知识，可以访问我们的 DOM 教程。

注意事项

在进行 DOM 操作时，请注意以下几点：

  • 确保在操作之前页面已经加载完成。
  • 在修改 DOM 时，最好使用事件委托来提高性能。