JavaScript DOM学习第一章 W3C DOM简介

JavaScript DOM（Document Object Model）是用于描述文档的抽象表示形式的编程接口，它定义了一组标准对象，这些对象可以与HTML、XML或XHTML文档的元素、文本节点和属性进行交互。

本文主要介绍 W3C DOM （World Wide Web Consortium DOM）的基础知识，包括DOM的版本、DOM树结构、DOM节点以及DOM操作等常用基础概念。

DOM版本

DOM从1级到4级分为四个版本，如下：

• DOM Level 1：在1998年10月1日推出。
• DOM Level 2：在2000年11月13日推出。
• DOM Level 3：在2004年4月7日推出。
• DOM Level 4：在2015年9月29日推出。

当前浏览器所支持的 DOM 版本为1级和2级，因此，在日常开发中，我们大多数使用 DOM Level 1 和 2 API。

DOM树结构

我们可以把 DOM 看作是一个由 HTML 代码解析而来的一个树形结构。这个模型可以帮助开发者在编写 JavaScript 代码时操作页面元素。

例如，以下代码演示了如何获取对 id 为 example 元素的引用，以及对该元素文本内容的更新。

// 通过ID获取元素
var example = document.getElementById("example");

// 更新元素文本内容
example.innerHTML = "Hello World!";

DOM节点

DOM 树中的每个对象都是一个节点。这些节点被分为以下类型：

• 元素节点 - 代表 HTML 标签元素
• 文本节点 - 代表 HTML 文本内容
• 属性节点 - 代表 HTML 元素属性
• 注释节点 - 代表 HTML 注释

以下代码演示了如何获取 id 为 example 元素的引用，以及访问该元素的文本内容和属性值。

// 通过ID获取元素
var example = document.getElementById("example");

// 访问元素文本内容
var text = example.innerHTML;

// 访问元素属性值
var href = example.getAttribute("href");

DOM操作

DOM 提供了一系列操作文档的方法和属性：

• 获取页面元素
• 更新元素内容
• 添加、移除和替换页面元素
• 更改元素属性
• 处理事件

以下示例代码演示了如何创建一个新的段落元素，并将其添加到页面中。

// 创建新元素
var newParagraph = document.createElement("p");

// 新元素添加文本
newParagraph.innerHTML = "This is a new paragraph.";

// 获取目标父级元素
var parent = document.getElementById("parentElement");

// 将新元素添加到目标父级元素中
parent.appendChild(newParagraph);

最后，DOM 是 Web 设计、 Web 开发过程中不可或缺的一部分，熟练掌握 DOM 操作对于实现网页交互、动效和优化有着重要作用。