一、轻描HTML：
HTML全称（HyperText Mark-up Language），中文意思就是超文本标记语言，它是有一系列已经成了规范的标记（标签）组成一个HTML文件。HTML文件的结构由头（head）和主体(body)两大部分。
<html>
<head>
<title>AJAX入门到精通之二：剖析DOM</title>
</head>
<body>
<h1>DOM示例2-1</h1>
<p>轻描html</p>
<div>
<p id="xk">作者：星空</p>
<p>www.micblogs.cn</p>
</div>
</body>
</html>
二、认识HTML树视图：
当我们创建了一个网页（HTML文件）并把它加载到WEB浏览器的时候，浏览器就把它转换成了一棵树，针对上面的HTML文件，可以画出这样一棵树。
从图中，我们可以清楚的看到，HTML是根元素（跟节点），它有2个孩子head和body，title就是head的孩子.......依次类推。
三、认识DOM
DOM全称（Document Object Model）文档对象模型。根据W3C DOM规范（http://www.w3.org/DOM/）。大家看DOM的全称后，应该就想到了必须要有D（Document），否则DOM无从谈起，在WEB浏览器加载HTML文件（网页）的时候，这时我们的DOM也悄悄的产生了。这时我们的D、O、M就全部有了。
D：文档。具体形式就是HTML文件。
O：对象。具体形式就是WEB浏览器加载HTML文件后把每个节点看作是对象，如上图中的每个框框（标记），并能让用户使用JS代码操作这些对象。
M：模型。具体形式就是WEB浏览器转换成了树的结构。
四、DOM中的节点
在DOM中每项都是一个节点（DOM节点），DOM节点有特定的类型，例如：文本节点、元素节点、属性节点。
五、小小的示例
讲了这么么多理论上的东西，估计大家都看的很闷了，也许稍微懂点的读者看了我以上的文字也被弄的头大吧。希望这小小的示例能加深大家对DOM的理解。
1、HTML文件（就拿上面的文件结构）
2、JavaScript代码（DOM的操作代码是写在这JS里的）
document.getElementById("xk").innerText="DOM文档对象模型";
上面的代码的意思就是通过文档对象document的一个方法getElementById()查找元素节点中ID为"XK"的元素，并通过innerText属性设置新的文本值。
- 大小: 5.4 KB
分享到：
相关推荐
这一期文章将了解如何创建、删除和修改DOM树的各个部分，了解如何实现网页的即时更新。了解如何处理 Web页面的DOM树。比方说，如果向DOM树中增加一个元素，这个元素就会立即出现在用户的Web浏览器中 —— 不需要重新...
理解DOM的工作原理和JavaScript中的DOM API，对于任何想要深入Web开发，尤其是Ajax技术的人来说，是至关重要的。通过熟练掌握DOM，程序员可以创造出更加动态、响应和用户友好的Web应用程序，从而打破传统的前后端...
在本篇“掌握Ajax系列6：建立基于DOM的Web应用程序”中，我们将深入探讨如何利用JavaScript操作DOM（文档对象模型）来创建一个无需刷新页面的动态Web页面。DOM是一种编程接口，它允许开发者通过JavaScript来访问和...
通过深入理解并熟练运用jQuery的DOM操作和AJAX功能，开发者能够构建出动态、交互性强的网页应用，提升用户体验，同时减少与服务器的通信成本。在实际项目中，这些技术经常被用来实现页面局部刷新、异步提交表单、...
Beginning JavaScript with DOM Scripting and Ajax is an essential resource for modern JavaScript programming. This completely updated second edition covers everything you need to know to get up-to-...
hex163下载频道：所有精品资料全部无分下载！ 第 1 部分:Ajax 简介 第 2 部分:: 使用 JavaScript 和 Ajax 发出异步请求 第 3 部分: Ajax 中的高级...第 15部分：面向 Java 开发人员的 Ajax: 探索 Google Web Toolkit
这本书《Ajax in Action》是Ajax领域的经典之作，它详细介绍了如何利用Ajax技术来构建更加高效、交互性更强的Web应用程序。书中不仅涵盖了Ajax的基础知识，还深入探讨了各种实际应用场景，对于开发者来说是一本非常...
2. **DOM解析**：DOM解析器将XML文档转化为内存中的对象结构，开发者可以使用编程语言（如JavaScript、C#或Java）通过DOM API来查找、修改、添加和删除节点。理解DOM树的概念，掌握节点遍历和操作的方法，是使用DOM...
《gQuery：精简版jQuery DOM操作库》 在Web开发中，jQuery以其强大的功能和易用性成为了JavaScript库的首选。然而，对于一些轻量级项目或者对加载速度有较高要求的应用，jQuery的体积可能会显得过大。为了解决这个...
这个压缩包提供了丰富的资源，涵盖了Ajax、XML、DOM、JavaScript和CSS等关键领域的知识。以下是这些技术的详细解释： **Ajax（Asynchronous JavaScript and XML）**： Ajax是一种在不刷新整个网页的情况下，能够...
**Ajax完全自学手册-DOM基础及高级DOM技术** 在Web开发中，DOM（Document Object Model）扮演着核心角色，它是HTML和XML文档的结构化表示，允许编程语言与页面内容进行交互。本手册深入浅出地讲解了DOM的基础概念...
第 1 部分: Ajax 入门简介 2 第 2部分: 使用JavaScript和Ajax发出异步请求 10 第 3 部分: Ajax 中的高级请求和响应 26 第 4 部分: 利用 DOM 进行 Web 响应 40 第 5 部分: 操纵 DOM 51 第 6 部分: 建立基于 DOM 的 ...
#### 节点：DOM的基本单位 节点是DOM的核心概念，一切在DOM树中的实体，无论是元素、属性、文本还是注释，都被抽象为节点。理解节点的本质是理解DOM的关键。节点具有多种类型，包括元素节点、属性节点、文本节点、...
3. **事件处理**：DOM支持事件监听，例如`addEventListener()`用于添加事件处理函数，`removeEventListener()`用于移除。可以处理各种用户交互，如点击、鼠标移动等。 4. **CSS操作**：使用`style`属性可以直接修改...
### 掌握Ajax系列之四：利用DOM进行Web响应 #### 深入理解DOM：构建Web响应的核心 在探讨如何利用DOM（Document Object Model，文档对象模型）进行Web响应之前，我们首先需要理解DOM的基本概念及其在Web开发中的...
《Ajax实战：实例详解》这本书是关于Web开发领域中异步JavaScript和XML（Ajax）技术的一本实践指南。Ajax技术的出现，使得网页无需刷新就能实现数据的动态更新，极大地提升了用户体验。本书的"sources"部分包含了...
简单的介绍一下，DOM常用API的属性和方法
5. **遍历和搜索**：DOM提供了遍历和查找节点的方法，如`childNodes`、`parentNode`、`firstChild`、`lastChild`、`nextSibling`、`previousSibling`以及`querySelector()`和`querySelectorAll()`等。 6. **...