如何在 JavaScript 中使用 DOM 元素获取更改 HTML？

在 JavaScript 中，可以使用 DOM（文档对象模型）元素来获取和修改 HTML 元素。DOM 元素是为 DOM 树中的每个 HTML 元素创建的对象。您可以使用不同的属性和方法来访问和修改 DOM 元素。

以下是一些常见的方法和属性，用于在 JavaScript 中使用 DOM 元素获取和修改 HTML 元素：

获取 DOM 元素

要获取 HTML 元素的 DOM 元素，请使用 document.getElementById() 方法：

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

这将返回拥有指定 id "myElement" 的 HTML 元素的 DOM 元素。您现在可以使用 DOM 元素上的其他属性和方法来访问或修改元素。

修改 DOM 元素

可以使用以下属性或方法来修改 DOM 元素：

innerHTML

innerHTML 属性可用于设置或获取 DOM 元素的 HTML 内容：

element.innerHTML = "新的 HTML 内容";

这将替换当前元素的 HTML 内容。

textContent

textContent 属性可用于设置或获取 DOM 元素的纯文本内容：

element.textContent = "新的文本内容";

属性

可以使用 setAttribute 或直接赋值来设置元素的属性：

element.setAttribute("src", "new-image.jpg");
// 或者
element.src = "new-image.jpg";

这将将 src 属性设置为 "new-image.jpg"。

创建新的 DOM 元素

可以使用以下方法在 JavaScript 中创建新的 DOM 元素：

createElement

createElement 方法可用于创建新的 HTML 元素：

let newElement = document.createElement("div");

这将创建一个新的 div 元素。

createTextNode

createTextNode 方法可用于创建包含文本内容的新节点：

let textNode = document.createTextNode("这是一个文本节点");

这将创建一个包含 "这是一个文本节点" 文本内容的文本节点。

appendChild

appendChild 方法可用于将新元素添加到现有元素的末尾：

let container = document.getElementById("container");
container.appendChild(newElement);

这将将 newElement 添加到 container 元素的末尾。

这些是使用 JavaScript 中的 DOM 元素获取和修改 HTML 的一些基本方法和属性。DOM API 还提供了许多其他属性和方法，可以根据需要进行详细了解和使用。