文中使用一个示例应用程序演示了 DOM 方法和属性以及如何向 DOM 事件附加处理程序。
万维网联盟 (W3C) 已经在不同的规范组（DOM 1 级、DOM 2 级和 DOM 3 级）对文档对象模型 (DOM) 进行了定义。 DOM 将 HTML 或 XML 表示为一棵树，该树由具有属性和方法的不同层次的节点组成。使用客户端语言例如 JavaScript，您可以为该树中的节点添加、修改、删除以及附加事件，从而产生交互、动态的 Web 页面。
使用客户端脚本语言 (JavaScript) 修改 DOM 的行为称为 DOM 脚本编程。DOM 脚本编程用来代替通用术语动态 HTML (DHTML)，DHTML 在 Web 开发中用来表示使用 HTML、CSS 和 JavaScript 的交互 Web 页面的构造。
本文探讨了 DOM API 中最常用的方法和属性。使用一个详细的示例来展示如何使用 JavaScript 遍历 DOM。使用一个较复杂的模型阐述了在何处需要考虑事件和监听程序。了解如何利用 JavaScript 库与 DOM 进行交互。
DOM 脚本编程
在 DOM 术语中，document 表示树根。在 JavaScript 中表示为 window.document，或者简单地表示为 document（因为它被附加到 Window 对象）。这是 JavaScript 实现的起始点。 清单 1 显示了一个 HTML 片段示例。
清单 1. HTML 代码
<body> <p id="paragraph1"> <span>This is some text</span> <a href="/index.html" title="Click here">Click here</a> <p></body>
从 DOM 角度看，以上示例中 p 标签由 DOM Element 接口表示。它是 span 标签和 a 标签的父标签。span 标签和 a 标签是同级标签。
假如您想要获取 清单 1 中代码定位点的 href 属性。访问 DOM 中某个元素的简单方法是使用 getElementById 方法。 以下代码串显示了包含使用接口定义语言 (IDL) 编写的 getElementById 签名的文档接口定义的一部分： Element getElementById (in DOMString elementId)。
JavaScript 使用 String 对象实现 DOMString 接口，所以该方法以字符串的形式接受元素 ID 并将其作为一个参数。 在示例片段中，带有 id 属性的惟一元素是 p 标签，所以可以使用 var paragraph = document.getElementById("paragraph1"); 检索它。
使用 childNodes 属性您可以获得嵌入在 p 标签中的定位点。该属性属于 Node 接口，并返回一个 NodeList 类型的对象。 在 JavaScript 中，该对象是一个数组式的对象。数组式的对象没有方法，比如 pop() 或 push()，但是它们有 length 属性。 从 childNodes 属性中返回的对象在节点元素（HTML 标签）、文本节点或注释节点之间没有任何不同。 如果您只要寻找节点元素，您可以考虑 children 属性。不考虑文本和注释节点的话，它比 childNodes 更能满足我们的目的。 在该示例中，定位点是段落的第二个子节点，可以使用 var aElement = paragraph.children[1]; 获得。
给定一个元素，要获取 href 属性的值，您可以采用 getAttribute 方法，将属性名作为一个参数进行传递（在本例中，为 href）。 包含 getAttribute 方法的 IDL 定义部分为： DOMString getAttribute (in DOMString name)。
在该示例中，您可以像这样实现以上接口：var aHref = aElement.getAttribute("href"); // "index.html"。
与在 JavaScript 中一样，您可以将方法链接起来。若要通过一行获取 a 标签 href 属性的值，请使用：var aHref = document.getElementById("paragraph1").children[1].getAttribute("href"); // index.html */。
探究 DOM 脚本编程：示例应用程序
本节探究 DOM 脚本编程的一些特性。Sticky Notes 示例应用程序是一个交互的 Web 页面，该页面可让用户不需重新加载页面即可添加 “sticky” 注释。图 1 显示了该页面。
图 1. Sticky Notes 应用程序前端
图 1 所显示页面的 HTML 代码显示在 清单 2 中。在清单 2 中 head 标签是对 CSS 和 JS 文件的引用。 在 body 标签中您已经可以看到页面中注释的结构：textarea 标签和触发新注释创建的定位点。
清单 2. HTML 代码
<!DOCTYPE html><html> <head> <meta charset=utf-8"> <title> Dom Scripting </title> <link rel="stylesheet" href="css/master.css" /> <script src="js/script.js"></script> </head> <body> <div class="wrapper"> <h1> Sticky Notes </h1> <div class="links"> <textarea id="contentArea" cols="10"> </textarea> <a href="/random.html" class="add">Click here</a> <span>to add a sticky note</span> </div> <div id="notes"> <div class="note"> <p> This is a note </p> </div> </div> </div> </body></html>