利用 DOM 进行 Web 响应

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

·分解为元素（比如 em 和 b）的文本呢？
·结构不正确（比如当缺少结束 p 标记时）的 HTML 呢？

一旦熟悉这些问题之后，就能更好地理解下面几节了。

严格有时是好事

如果尝试刚提到的练习 I，您可能会发现标记的树视图中存在一些潜在问题（如果不练习的话，那就听我说吧！）。事实上，在清单 1 和图 1 中就会发现一些问题，首先看 p 元素是如何分解的。如果您问通常的 Web 开发人员 “p 元素的文本内容是什么”，最常见的答案将是 “Welcome to a really boring Web page.”。如果将之与图 1 做比较，将会发现这个答案（虽然合乎逻辑）是根本不正确的。

实际上，p 元素具有三个不同的子对象，其中没有一个包含完整的 “Welcome to a really boring Web page.” 文本。您会发现文本的一部分，比如 “Welcome to a ” 和 “ boring Web page”，但不是全部。为了理解这一点，记住标记中的任何内容都必须转换为某种类型的对象。

此外，顺序无关紧要！如果浏览器显示正确的对象，但显示顺序与您在 HTML 中提供的顺序不同，那么您能想像出用户将如何响应 Web 浏览器吗？段落夹在页面标题和文章标题中间，而这不是您自己组织文档时的样式呢？很显然，浏览器必须保持元素和文本的顺序。

在本例中，p 元素有三个不同部分：

·em 元素之前的文本
·em 元素本身
·em 元素之后的文本

如果将该顺序打乱，可能会把重点放在文本的错误部分。为了保持一切正常，p 元素有三个子对象，其顺序是在清单 1 的 HTML 中显示的顺序。而且，重点文本 “really” 不是p 的子元素；而是 p 的子元素 em 的子元素。

理解这一概念非常重要。尽管 “really” 文本将可能与其他 p 元素文本一起显示，但它仍是 em 元素的直接子元素。它可以具有与其他 p 文本不同的格式，而且可以独立于其他文本到处移动。

要将之牢记在心，试着用图表示清单 2 和 3 中的 HTML，确保文本具有正确的父元素（而不管文本最终会如何显示在屏幕上）。

清单 2. 带有巧妙元素嵌套的标记

<html>
<head>
<title>This is a little tricky</title>
</head>
<body>
<h1>Pay <u>close</u> attention, OK?</h1>
<div>
   <p>This p really isn't <em>necessary</em>, but it makes the
      <span id="bold-text">structure <i>and</i> the organization</span>
      of the page easier to keep up with.</p>
</div>
</body>
</html>

清单 3. 更巧妙的元素嵌套

<html>
<head>
<title>Trickier nesting, still</title>
上一页 [1] [2] [3] [4] [5] [6] [7] 下一页
利用 DOM 进行 Web 响应相关文章：
·利用 DOM 进行 Web 响应
利用 DOM 进行 Web 响应相关软件

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

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

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

利用 DOM 进行 Web 响应

精品推荐

热点TOP10

特别推荐