掌握 ajax，第 5 部分 操纵 dom.htm

主要是我最近两月在公司通过百度学习的内容,有AJAX,DWR,JAVA实现文件的上传和下载.主要目的在与告诉大家一个成功程序员(JAVA)是如何学习的,需要学习什么内容.以及学习的态度.

            align=right border=0>
              <TBODY>
              <TR>
                <TD width=10><IMG height=1 alt="" 
                  src="掌握 Ajax，第 5 部分 操纵 DOM.files/c.gif" width=10></TD>
                <TD>
                  <TABLE cellSpacing=0 cellPadding=0 width=150 border=0>
                    <TBODY>
                    <TR>
                      <TD class=v14-header-1-small>文档选项</TD></TR></TBODY></TABLE>
                  <TABLE class=v14-gray-table-border cellSpacing=0 cellPadding=0 
                  border=0>
                    <TBODY>
                    <TR>
                      <TD class=no-padding width=150>
                        <TABLE cellSpacing=0 cellPadding=0 width=143 
                          border=0><IMG height=1 alt="" 
                          src="掌握 Ajax，第 5 部分 操纵 DOM.files/c.gif" width=8>
                          <FORM name=email 
                          action=https://www.ibm.com/developerworks/secure/email-it.jsp><INPUT 
                          type=hidden 
                          value="上一期中 Brett 介绍了文档对象模型（DOM），它的元素在幕后定义了 Web 页面。这一期文章中他将进一步探讨 DOM。了解如何创建、删除和修改 DOM 树的各个部分，了解如何实现网页的即时更新！" 
                          name=body><INPUT type=hidden 
                          value="掌握 Ajax，第 5 部分: 操纵 DOM" name=subject><INPUT 
                          type=hidden value=cn name=lang>
                          <SCRIPT language=JavaScript type=text/javascript>
<!--
document.write('<tr valign="top"><td width="8"><img src="//www.ibm.com/i/c.gif" width="8" height="1" alt=""/></td><td width="16"><img src="//www.ibm.com/i/v14/icons/em.gif" height="16" width="16" vspace="3" alt="将此页作为电子邮件发送" /></td><td width="122"><p><a class="smallplainlink" href="javascript:document.email.submit();"><b>将此页作为电子邮件发送</b></a></p></td></tr>');
//-->
</SCRIPT>
                          <NOSCRIPT>
                          <TBODY>
                          <TR vAlign=top>
                            <TD width=8><IMG height=1 alt="" 
                              src="掌握 Ajax，第 5 部分 操纵 DOM.files/c.gif" 
width=8></TD>
                            <TD width=16><IMG height=16 alt="" 
                              src="掌握 Ajax，第 5 部分 操纵 DOM.files/c.gif" 
                            width=16></TD>
                            <TD class=small width=122>
                              <P><SPAN class=ast>未显示需要 JavaScript 
                              的文档选项</SPAN></P></TD></TR></NOSCRIPT></FORM></TBODY></TABLE></TD></TR></TBODY></TABLE><!--START RESERVED FOR FUTURE USE INCLUDE FILES--><!-- 03/20/06 updated by gretchen --><BR>
                  <TABLE cellSpacing=0 cellPadding=0 width=150 border=0>
                    <TBODY>
                    <TR>
                      <TD class=v14-header-2-small>拓展 Tomcat 
                  应用</TD></TR></TBODY></TABLE>
                  <TABLE class=v14-gray-table-border cellSpacing=0 cellPadding=0 
                  border=0>
                    <TBODY>
                    <TR>
                      <TD class=no-padding width=150>
                        <TABLE cellSpacing=0 cellPadding=0 width=143 border=0>
                          <TBODY>
                          <TR vAlign=top>
                            <TD width=8><IMG height=1 alt="" 
                              src="掌握 Ajax，第 5 部分 操纵 DOM.files/c.gif" 
width=8></TD>
                            <TD><IMG height=16 alt="" 
                              src="掌握 Ajax，第 5 部分 操纵 DOM.files/fw_bold.gif" 
                              width=16 vspace=3 border=0></TD>
                            <TD width=125>
                              <P><A class=smallplainlink 
                              href="http://www.ibm.com/developerworks/cn/kickstart/webserver.html?S_TACT=105AGX52&amp;S_CMP=simpleart">下载 
                              IBM 开源 J2EE 应用服务器 WAS CE 新版本 V1.1</A> 
                          </P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><!--END RESERVED FOR FUTURE USE INCLUDE FILES--><BR></TD></TR></TBODY></TABLE>
            <P>级别: 初级</P>
            <P><A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro5/#author">Brett 
            McLaughlin</A> (<A 
            href="mailto:[e-mail]?subject=操纵 DOM&amp;cc=[e-mail]">mailto:[e-mail]?subject=操纵 
            DOM&amp;cc=[e-mail]</A>), 作家，编辑, O'Reilly Media Inc.<BR></P>
            <P>2006 年 4 月 27 日</P>
            <BLOCKQUOTE>上一期中 Brett 介绍了文档对象模型（DOM），它的元素在幕后定义了 Web 
              页面。这一期文章中他将进一步探讨 DOM。了解如何创建、删除和修改 DOM 
            树的各个部分，了解如何实现网页的即时更新！</BLOCKQUOTE><!--START RESERVED FOR FUTURE USE INCLUDE FILES--><!-- include java script once we verify teams wants to use this and it will work on dbcs and cyrillic characters --><!--END RESERVED FOR FUTURE USE INCLUDE FILES-->
            <P>如果阅读过本系列的 <A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/">上一期文章</A>，那么您就非常清楚当 
            Web 浏览器显示网页时幕后发生的一切了。前面已经提到，当 HTML 或为页面定义的 CSS 发送给 Web 
            浏览器时，网页被从文本转化成对象模型。无论代码简单或复杂，集中到一个文件还是分散到多个文件，都是如此。然后浏览器直接使用对象模型而不是您提供的文本文件。浏览器使用的模型称为<I>文档对象模型（Document 
            Object Model，DOM）</I>。它连接表示文档中元素、属性和文本的对象。HTML 和 CSS 
            中所有的样式、值、甚至大部分空格都合并到该对象模型中。给定网页的具体模型称为该页面的 <I>DOM 树</I>。</P>
            <P>了解什么是 DOM 树，以及知道它如何表示 HTML 和 CSS 仅仅是控制 Web 页面的第一步。接下来还需要了解如何处理 
            Web 页面的 DOM 树。比方说，如果向 DOM 树中增加一个元素，这个元素就会立即出现在用户的 Web 浏览器中 —— 
            不需要重新加载页面。从 DOM 树中删除一些文本，那些文本就会从用户屏幕上消失。可以通过 DOM 
            修改用户界面或者与用户界面交互，这样就提供了很强的编程能力和灵活性。一旦学会了如何处理 DOM 
            树，您就向实现丰富的、交互式动态网站迈出了一大步。</P>
            <P>注意，下面的讨论以上一期文章 “<A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/">利用 
            DOM 进行 Web 响应</A>” 为基础，如果没有阅读过那一期，请在继续阅读之前首先阅读上一期文章。</P>
            <TABLE cellSpacing=0 cellPadding=0 width="50%" align=right 
              border=0><TBODY>
              <TR>
                <TD width=10><IMG height=1 alt="" 
                  src="掌握 Ajax，第 5 部分 操纵 DOM.files/c.gif" width=10></TD>
                <TD>
                  <TABLE cellSpacing=0 cellPadding=5 width="100%" border=1>
                    <TBODY>
                    <TR>
                      <TD bgColor=#eeeeee><A 
                        name=N10088><B>首字母缩写的拼读问题</B></A><BR>
                        <P>从很多方面来说，文档对象模型应该被称为文档节点模型（Document Node 
                        Model，DNM）。当然，大多数人不知道<I>节点</I> 一词的含义，而且 “DNM” 也不像 “DOM” 
                        那么容易拼读，所以很容易理解 W3C 为何选择了 
              DOM。</P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
            <P><A name=N10094><SPAN class=atitle>跨浏览器、跨语言</SPAN></A></P>
            <P>文档对象模型是一种 W3C 标准（链接参见 <A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro5/#resources">参考资料</A>）。因此，所有现代 
            Web 浏览器都支持 DOM —— 至少在一定程度上支持。虽然不同的浏览器有一些区别，但如果使用 DOM 
            核心功能并注意少数特殊情况和例外，DOM 代码就能以同样的方式用于任何浏览器。修改 Opera 网页的代码同样能用于 Apple's 
            Safari®、Firefox®、Microsoft® Internet Explorer® 和 Mozilla®。</P>
            <P>DOM 也是一种<I>跨语言</I> 的规范，换句话说，大多数主流编程语言都能使用它。W3C 为 DOM 
            定义了几种<I>语言绑定</I>。一种语言绑定就是为特定语言定义的让您使用 DOM 的 API。比如，可以使用为 C、Java 和 
            JavaScript 定义的 DOM 语言绑定。因此可以从这些语言中使用 DOM。还有几种用于其他语言的语言绑定，尽管很多是由 W3C 
            以外的第三方定义的。</P>
            <P>本系列文章主要讨论 JavaScript 的 DOM 绑定。这是因为多数异步应用程序开发都需要编写在 Web 浏览器中运行的 
            JavaScript 代码。使用 JavaScript 和 DOM 可以即时修改用户界面、响应用户事件和输入等等 —— 
            使用的完全是标准的 JavaScript。</P>
            <P>总之，建议您也尝试一下其他语言中的 DOM 绑定。比如，使用 Java 语言绑定不仅能处理 HTML 还可处理 
            XML，这些内容将在以后的文章中讨论。因此本文介绍的技术还可用于 HTML 之外的其他语言，客户端 JavaScript 
            之外的其他环境。</P><BR>
            <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
              <TBODY>
              <TR>
                <TD><IMG height=1 alt="" 
                  src="掌握 Ajax，第 5 部分 操纵 DOM.files/blue_rule.gif" 
                  width="100%"><BR><IMG height=6 alt="" 
                  src="掌握 Ajax，第 5 部分 操纵 DOM.files/c.gif" width=8 
              border=0></TD></TR></TBODY></TABLE>
            <TABLE class=no-print cellSpacing=0 cellPadding=0 align=right>
              <TBODY>
              <TR align=right>
                <TD><IMG height=4 alt="" 
                  src="掌握 Ajax，第 5 部分 操纵 DOM.files/c.gif" width="100%"><BR>
                  <TABLE cellSpacing=0 cellPadding=0 border=0>
                    <TBODY>
                    <TR>
                      <TD vAlign=center><IMG height=16 alt="" 
                        src="掌握 Ajax，第 5 部分 操纵 DOM.files/u_bold.gif" width=16 
                        border=0><BR></TD>
                      <TD vAlign=top align=right><A class=fbox 
                        href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro5/#main"><B>回页首</B></A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR>
            <P><A name=N100BA><SPAN class=atitle>节点的概念</SPAN></A></P>
            <P>节点是 DOM 中最基本的对象类型。实际上，您将在本文中看到，基本上 DOM 
            定义的其他所有对象都是节点对象的扩展。但是在深入分析语义之前，必须了解节点所代表的概念，然后再学习节点的具体属性和方法就非常简单了。</P>
            <P>在 DOM 树中，基本上一切都是节点。每个元素在最底层上都是 DOM 
            树中的节点。每个属性都是节点。每段文本都是节点。甚至注释、特殊字符（如版权符号 &amp;copy;）、DOCTYPE 声明（如果 
            HTML 或者 XHTML 中有的话）全都是节点。因此在讨论这些具体的类型之前必须清楚地把握什么是节点。</P>
            <P><A name=N100C6><SPAN class=smalltitle>节点是……</SPAN></A></P>
            <P>用最简单的话说，节点就是 DMO 树中的任何事物。之所以用 “事物” 这个模糊的字眼，是因为只能明确到这个程度。比如 HTML 
            中的元素（如 <CODE>img</CODE>）和 HTML 中的文本片段（如 “Scroll down for more 
            details”）没有多少明显的相似之处。但这是因为您考虑的可能是每种类型的<I>功能</I>，关注的是它们的不同点。</P>
            <P>但是如果从另一个角度观察，DOM 树中的每个元素和每段文本都有一个<I>父亲</I>，这个父节点可能是另一个元素（比如嵌套在 
            <CODE>p</CODE> 元素中的 <CODE>img</CODE>）的孩子，或者 DOM 
            树中的顶层元素（这是每个文档中都出现一次的特殊情况，即使用 <CODE>html</CODE> 
            元素的地方）。另外，元素和文本都有一个<I>类型</I>。显然，元素的类型就是元素，文本的类型就是文本。每个节点还有某种定义明确的结构：下面还有节点（如子元素）吗？有<I>兄弟节点</I>（与元素或文本 
            “相邻的” 节点）吗？每个节点属于哪个文档？</P>
            <P>显然，大部分内容听起来很抽象。实际上，说一个元素的类型是元素似乎有点冒傻气。但是要真正认识到将节点作为通用对象类型的价值，必须抽象一点来思考。</P>
            <P><A name=N100F1><SPAN class=smalltitle>通用节点类型</SPAN></A></P>
            <P>DOM 代码中最常用的任务就是在页面的 DOM 树中导航。比方说，可以通过其 “id” 属性定位一个 
            <CODE>form</CODE>，然后开始处理那个 <CODE>form</CODE> 
            中内嵌的元素和文本。其中可能包含文字说明、输入字段的标签、真正的 <CODE>input</CODE> 元素，以及其他 HTML 
            元素（如 <CODE>img</CODE>）和链接（<CODE>a</CODE> 
            元素）。如果元素和文本是完全不同的<I>类型</I>，就必须为每种类型编写完全不同的代码。</P>
            <P>如果使用一种通用节点类型情况就不同了。这时候只需要从一个节点移动到另一个节点，只有当需要对元素或文本作某种特殊处理时才需要考虑节点的<I>类型</I>。如果仅仅在 
            DOM 
            树中移动，就可以与其他节点类型一样用同样的操作移动到元素的父节点或者子节点。只有当需要某种节点类型的特殊性质时，如元素的属性，才需要对节点类型作专门处理。将 
            DOM 树中的所有对象都看作节点可以简化操作。记住这一点之后，接下来我们将具体看看 DOM 
            节点构造应该提供什么，首先从属性和方法开始。</P><BR>
            <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
              <TBODY>
              <TR>
                <TD><IMG height=1 alt="" 
                  src="掌握 Ajax，第 5 部分 操纵 DOM.files/blue_rule.gif" 
                  width="100%"><BR><IMG height=6 alt="" 
                  src="掌握 Ajax，第 5 部分 操纵 DOM.files/c.gif" width=8 
              border=0></TD></TR></TBODY></TABLE>
            <TABLE class=no-print cellSpacing=0 cellPadding=0 align=right>
              <TBODY>
              <TR align=right>
                <TD><IMG height=4 alt="" 
                  src="掌握 Ajax，第 5 部分 操纵 DOM.files/c.gif" width="100%"><BR>
                  <TABLE cellSpacing=0 cellPadding=0 border=0>
                    <TBODY>
                    <TR>
                      <TD vAlign=center><IMG height=16 alt="" 
                        src="掌握 Ajax，第 5 部分 操纵 DOM.files/u_bold.gif" width=16