DOM 教程

这个页面提供了关于 DOM（文档对象模型）的基础教程。DOM 是浏览器中用于处理 HTML 和 XML 文档的接口。

什么是 DOM？

DOM 是一个跨平台和语言独立的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

基础概念

• 节点（Node）：文档中的每一个元素，比如元素、文本、属性等都可以被看作是一个节点。
• 元素（Element）：表示 HTML 中的标签，如 <div>、<p> 等。
• 属性（Attribute）：元素的一个属性，比如 <div id="myDiv"> 中的 id 属性。
• 文本节点（Text Node）：包含在元素内部的文本内容。

操作 DOM

以下是几个操作 DOM 的基本方法：

• 获取元素：

  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()

• 修改元素内容：

  • innerText 或 textContent
  • innerHTML

• 修改元素属性：

  • attribute

• 添加或移除元素：

  • appendChild()
  • removeChild()

实例

假设我们要获取 ID 为 myDiv 的元素，并改变它的文本内容。

// 获取元素
var div = document.getElementById('myDiv');

// 修改元素内容
div.innerText = '这是新的文本内容。';

图片展示

下面是一个 DOM 节点的示例。

扩展阅读

想要了解更多关于 DOM 的知识，请访问我们的 DOM 进阶教程。