Client-Side JavaScript: with DOM客户端 JavaScript 与 DOM

---

学习目标

观看本视频后，您将能够：

• 描述 文档对象模型 (DOM) 的层次结构。
• 了解 窗口对象 (Window Object) 和 文档对象 (Document Object)。
• 识别 JavaScript 中常用的 DOM 对象，用于操作 HTML 文档。
  

---

文档对象模型 (DOM)

定义

• DOM 是 HTML 或 XHTML 与 JavaScript 之间的 编程接口。
• 它是一个基于浏览器的接口，用于 动态访问和更新 文档的内容、结构和样式。
  

---

DOM 的层级发展

• 万维网联盟 (W3C) 发布了 4 个级别的 DOM 规范。
• 每个级别提供了更详细的功能，用于描述结构化文档。
  
• 重点学习内容：
  • DOM Level 1 核心和 HTML API。
  • 这些标准被大多数现代浏览器完全支持。
    

---

基本 DOM 模型层次结构

---

DOM 层次与节点

DOM 层次

• Window 对象：
  • 是 DOM 层次结构的顶层。
  • JavaScript 的全局对象，包含所有 DOM 操作。
  • 提供诸如 alert()、confirm() 和 prompt() 等全局方法。
    
    
• Document 对象：
  • 每个 HTML 文档都会变成一个 Document 对象。
  • 提供访问 HTML 元素的能力，如 getElementById() 和 getElementsByTagName()。

---

DOM 树与节点类型

树结构

• DOM 结构是树形的，分支称为 节点 (Nodes)。
• 节点类型：
  • 元素节点：HTML 标签（如 <html>、<body> 等）。
  • 文本节点：位于开始和结束标签之间的文本内容。
    

DOM Level 2 示例

• DOM Level 2 树增加了换行符、制表符和空格（称为“空白”）。
• 例如：
  • 段落 <p> 之前的换行符是 文本节点。
  • 输入框 <input> 后的换行符也是 文本节点。
    

---

DOM 对象的功能

Window 对象的预定义方法

• alert()：显示消息弹窗。
• confirm()：显示确认对话框。
• prompt()：显示输入框。

提示：可以省略 window. 前缀，例如直接调用 alert()。

---

Document 对象的操作

• 访问元素：
  • getElementById(id)：通过 ID 获取单个元素。
  • getElementsByTagName(tagName)：获取指定标签名的元素列表。
• 动态修改文档：
  • 添加新节点：

    let newPara = document.createElement("p");
    newPara.textContent = "新段落内容";
    document.body.appendChild(newPara); // 添加到页面末尾
    
    

---

HTML 与 DOM 的层次关系

• HTML 包含关系 与 DOM 对象层次 对应：

  <html>
    <head>
      <title>页面标题</title>
    </head>
    <body>
      <p>段落内容</p>
    </body>
  </html>
  
  

  对应的 DOM 对象树：

  Window
    └── Document
        ├── html
        │   ├── head
        │   │   └── title
        │   └── body
        │       └── p
  
  

---

总结

通过这些知识，您可以使用 JavaScript 高效操作 HTML 文档，增强网页的交互性和动态性！ 🚀