HTML DOM - 修改 HTML 内容

HTML DOM - 修改 HTML 内容

HTML DOM (Document Object Model) 是用于访问 HTML 文档的标准编程接口。它将 HTML 文档表示为带有层次结构的对象的集合，这些对象具有属性、方法和事件。HTML DOM 提供了一种方便的方法来修改 HTML 文档的内容。以下是一些常见的方法。

  1. 修改 HTML 元素的文本内容

可以使用 innerHTML 属性来替换 HTML 元素的文本内容。例如，以下代码将替换 id 为 example 的元素的文本内容：

document.getElementById("example").innerHTML = "New text";
  1. 修改 HTML 元素的属性

可以使用 setAttribute 方法来修改 HTML 元素的属性。例如，以下代码将修改 id 为 example 的元素的 src 属性：

document.getElementById("example").setAttribute("src", "newimage.png");
  1. 创建新的 HTML 元素

可以使用 createElement 方法创建新的 HTML 元素对象。例如，以下代码将创建一个新的 div 元素：

var newDiv = document.createElement("div");

可以使用 appendChild 方法将新的元素添加到文档中。例如，以下代码将添加新的 div 元素到 id 为 example 的元素中：

document.getElementById("example").appendChild(newDiv);
  1. 删除 HTML 元素

可以使用 removeChild 方法从文档中删除 HTML 元素。例如，以下代码将删除 id 为 example 的元素：

var element = document.getElementById("example");
element.parentNode.removeChild(element);
  1. 修改 HTML 元素的样式

可以使用 style 属性来修改 HTML 元素的样式。例如，以下代码将修改 id 为 example 的元素的背景颜色：

document.getElementById("example").style.backgroundColor = "red";

可以使用 className 属性来修改 HTML 元素的类。例如，以下代码将修改 id 为 example 的元素的类：

document.getElementById("example").className = "new-class";

以上是 HTML DOM 修改 HTML 内容的几种常见方法。HTML DOM 提供了许多其他方法来修改 HTML 元素，开发人员可以通过查看相关文档学习更多。

HTML DOM - 修改 HTML DOM - 元素