JavaScript DOM 基础教程

DOM（文档对象模型）是 JavaScript 操作网页元素的核心。本教程将介绍 DOM 的基本概念和使用方法。

什么是 DOM？

DOM 是一种将 HTML 或 XML 文档表示为树形结构的模型。每个节点（Node）代表文档中的一个实体，如元素、文本或属性。

DOM 节点类型

  • 元素节点（Element Node）：代表 HTML 元素，如 <div>、<p> 等。
  • 文本节点（Text Node）：代表元素内的文本内容。
  • 属性节点（Attribute Node）：代表元素的属性，如 class、id 等。

查找元素

要操作 DOM，首先需要找到要操作的元素。以下是一些常用的查找方法：

  • document.getElementById(id)：通过 ID 查找元素。
  • document.getElementsByTagName(tagName)：通过标签名查找元素。
  • document.getElementsByClassName(className)：通过类名查找元素。

操作元素

找到元素后，可以进行以下操作：

  • 修改元素内容：element.innerHTML 或 element.textContent
  • 修改元素属性：element.attributeName = value
  • 添加或删除元素：element.appendChild(newElement) 或 element.removeChild(elementToRemove)
  • 修改元素样式：element.style.property = value

示例

以下是一个简单的示例，演示如何使用 JavaScript 添加一个新元素到页面中：

// 创建一个新元素
var newElement = document.createElement("div");

// 设置新元素的文本内容
newElement.textContent = "这是一个新元素！";

// 将新元素添加到页面中
document.body.appendChild(newElement);

扩展阅读

想了解更多关于 DOM 的知识？请访问我们的 DOM 教程。

JavaScript DOM