JavaScript DOM ObjectsJavaScript DOM 对象

---

学习目标

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

• 列出相关的 节点类型 (Node Types)。
• 展示如何通过 DOM API 访问 HTML 页面中的元素。
• 解释如何命名对象以便更方便地从脚本中访问。
  

---

DOM 节点类型

W3C DOM Level 2 节点类型

• 定义：W3C DOM Level 2 定义了 12 种节点类型，其中 7 种 在 HTML 文档中直接适用。
• 节点类型对应表：

• 示例说明：
  • 对于 ELEMENT_NODE，节点名称为标签名，例如 DIV。
  • ATTRIBUTE_NODE 包含键值对，属性名为 id，属性值为 div123。
  • TEXT_NODE 的节点名称为 #text，值为文本内容本身。
    

---

DOM 树的节点属性

这些属性可以通过开发者工具（如 Chrome DevTools）查看。

---

访问 HTML 页面元素

HTML 元素的数组

• 浏览器在加载 HTML 文档时，会为以下类型的元素创建数组：
  • 表单 (forms)、图片 (images)、锚点 (anchors)、链接 (links)、嵌入 (embeds)。
• 数组索引从 0 开始，对应文档中元素的出现顺序。
  

---

访问元素的示例

---

使用id属性访问元素

• id 的规则：
  1. 唯一性：id 值在文档中必须是唯一的。
  2. 字符串格式：赋值时需加引号。
  3. 格式限制：id 不应以数字开头。
     
• 访问方法：使用 document.getElementById()。

  let element = document.getElementById("myId");
  element.style.color = "red"; // 修改颜色
  

• 建议：id 和 name 属性的值可相同，便于脚本引用。
  

---

嵌套对象的点式表示法

点式表示法的优点

1. 层级清晰：按层级逐步访问嵌套对象。
2. 易读易写：代码直观，便于理解和维护。

示例

// 访问嵌套对象
let formField = document.forms[0].elements[0];
console.log(formField.value); // 输出字段的值

---

总结

通过掌握这些操作，您可以轻松使用 JavaScript 操作 DOM 对象，高效实现对 HTML 页面元素的动态管理！ 🚀