利用 DOM 进行 Web 响应

日期：2007年7月6日作者：查看:[大字体中字体小字体]

</head>
<body>
<h1>Trees, trees, everywhere</h1>
<p>Welcome to a <em>really</em> boring page.</p>
<div>
Come again soon.
<img src="http://www.webjx.com/htmldata/sort/come-again.gif" />
</div>
</body>
</html>

浏览器接受该页面并将之转换为树形结构，如图 1 所示。

为了保持本文的进度，我做了少许简化。DOM 或 XML 方面的专家会意识到空白对于文档文本在 Web 浏览器树结构中表示和分解方式的影响。肤浅的了解只会使事情变得模棱两可，所以如果想弄清空白的影响，那最好不过了；如果不想的话，那可以继续读下去，不要考虑它。当它成为问题时，那时您就会明白您需要的一切。

除了实际的树背景之外，可能会首先注意到树中的一切是以最外层的 HTML 包含元素，即 html 元素开始的。使用树的比喻，这叫做根元素。所以即使这是树的底层，当您查看并分析树的时候，我也通常以此开始。如果它确实奏效，您可以将整个树颠倒一下，但这确实有些拓展了树的比喻。

从根流出的线表示不同标记部分之间的关系。head 和 body 元素是 html 根元素的孩子；title 是 head 的孩子，而文本 “Trees, trees, everywhere” 是 title 的孩子。整个树就这样组织下去，直到浏览器获得与图 1 类似的结构。

一些附加术语

为了沿用树的比喻，head 和 body 被叫做 html 的分支（branches）。叫分支是因为它们有自己的孩子。当到达树的末端时，您将进入主要的文本，比如 “Trees, trees, everywhere” 和 “really”；这些通常称为叶子，因为它们没有自己的孩子。您不需要记住所有这些术语，当您试图弄清楚特定术语的意思时，只要想像一下树结构就容易多了。

对象的值

既然了解了一些基本的术语，现在应该关注一下其中包含元素名称和文本的小矩形了（图 1）。每个矩形是一个对象；浏览器在其中解决一些文本问题。通过使用对象来表示 HTML 文档的每一部分，可以很容易地更改组织、应用样式、允许 JavaScript 访问文档，等等。

对象类型和属性

标记的每个可能类型都有自己的对象类型。例如，HTML 中的元素用 Element 对象类型表示。文档中的文本用 Text 类型表示，属性用 Attribute 类型表示，以此类推。

所以 Web 浏览器不仅可以使用对象模型来表示文档（从而避免了处理静态文本），还可以用对象类型立即辨别出某事物是什么。HTML 文档被解析并转换为对象集合，如图 1 所示，然后尖括号和转义序列（例如，使用 < 表示 <，使用 > 表示 >）等事物不再是问题了。这就使得浏览器的工作（至少在解析输入 HTML 之后）变得更容易。弄清某事物究竟是元素还是属性并确定如何处理该类型的对象，这些操作都十分简单了。

通过使用对象，Web 浏览器可以更改这些对象的属性。例如，每个元素对象具有一个父元素和一系列子元素。所以添加新的子元素或文本只需要向元素的子元素列表中添加一个新的子元素。这些对象还具有 style 属性，所以快速更改元素或文本段的样式非常简单。例如，要使用 JavaScript 更改 div 的高度，如下所示：

someDiv.style.height = "300px";

换句话说，Web 浏览器使用对象属性可以非常容易地更改树的外观和结构。将之比作浏览器在内部将页面表示为文本时必须进行的复杂事情，每次更改属性或结构都需要浏览器重新编写静态文件、重新解析并在屏幕上重新显示。有了对象，所有这一切都解决了。

现在，花点时间展开一些 HTML 文档并用树将其勾画出来。尽管这看起来是个不寻常的请求（尤其是在包含极少代码的这样一篇文章中），如果您希望能够操纵这些树，那么需要熟悉它们的结构。

在这个过程中，可能会发现一些古怪的事情。比如，考虑下列情况：

·属性发生了什么？
上一页 [1] [2] [3] [4] [5] [6] [7] 下一页
利用 DOM 进行 Web 响应相关文章：
·利用 DOM 进行 Web 响应
利用 DOM 进行 Web 响应相关软件

上一篇:写给XML初学者的一些话

下一篇:使用 JavaScript 和 Ajax 发出异步请求

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

利用 DOM 进行 Web 响应

精品推荐

热点TOP10

特别推荐