在 HTML 文档对象模型（DOM）中，元素是构成网页的基本单位，代表了 HTML 标签，如 <p>、<div>、<a> 等。每个元素都可以拥有属性、子元素和文本内容。通过 JavaScript，您可以访问、修改、添加或删除这些元素，从而动态地操作网页内容。

访问元素：

您可以使用多种方法来访问 DOM 中的元素：

  • 通过 ID 获取元素：
  var element = document.getElementById("elementId");
  • 通过类名获取元素：
  var elements = document.getElementsByClassName("className");
  • 通过标签名获取元素：
  var elements = document.getElementsByTagName("tagName");
  • 通过 CSS 选择器获取元素：
  var element = document.querySelector(".className");
  var elements = document.querySelectorAll(".className");

修改元素：

一旦获取到元素，您可以修改其属性、样式或内容：

  • 修改文本内容：
  element.textContent = "新的文本内容";
  • 修改 HTML 内容：
  element.innerHTML = "<span>新的 HTML 内容</span>";
  • 修改属性：
  element.setAttribute("attributeName", "newValue");
  • 修改样式：
  element.style.color = "red";

添加和删除元素：

您还可以动态地添加或删除元素：

  • 创建新元素并添加到 DOM：
  var newElement = document.createElement("p");
  newElement.textContent = "这是一个新段落。";
  document.body.appendChild(newElement);
  • 删除元素：
  var elementToRemove = document.getElementById("elementId");
  elementToRemove.parentNode.removeChild(elementToRemove);

通过这些方法，您可以灵活地操作网页中的元素，实现动态交互和内容更新。

更多详细信息和示例代码，请参考 菜鸟教程。