HTML DOM - 修改 HTML 内容
HTML DOM - 修改 HTML 内容
HTML DOM (Document Object Model) 是用于访问 HTML 文档的标准编程接口。它将 HTML 文档表示为带有层次结构的对象的集合,这些对象具有属性、方法和事件。HTML DOM 提供了一种方便的方法来修改 HTML 文档的内容。以下是一些常见的方法。
- 修改 HTML 元素的文本内容
可以使用 innerHTML
属性来替换 HTML 元素的文本内容。例如,以下代码将替换 id 为 example
的元素的文本内容:
document.getElementById("example").innerHTML = "New text";
- 修改 HTML 元素的属性
可以使用 setAttribute
方法来修改 HTML 元素的属性。例如,以下代码将修改 id 为 example
的元素的 src
属性:
document.getElementById("example").setAttribute("src", "newimage.png");
- 创建新的 HTML 元素
可以使用 createElement
方法创建新的 HTML 元素对象。例如,以下代码将创建一个新的 div
元素:
var newDiv = document.createElement("div");
可以使用 appendChild
方法将新的元素添加到文档中。例如,以下代码将添加新的 div
元素到 id 为 example
的元素中:
document.getElementById("example").appendChild(newDiv);
- 删除 HTML 元素
可以使用 removeChild
方法从文档中删除 HTML 元素。例如,以下代码将删除 id 为 example
的元素:
var element = document.getElementById("example");
element.parentNode.removeChild(element);
- 修改 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 元素,开发人员可以通过查看相关文档学习更多。