📄 掌握 ajax，第 6 部分 建立基于 dom 的 web 应用程序.htm
字号:
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>
<html>
<head>
<title>Magic Hat</title>
<script language="JavaScript">
function showRabbit() {
var hatImage = document.getElementById("topHat");
}
</script>
</head>
<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" id="topHat" />
<br /><br />
<input type="button" value="Hocus Pocus!" />
</p>
</form>
</body>
</html>
</PRE></TD></TR></TBODY></TABLE><BR>
<P>现在打开或重新加载该网页同样没有什么惊奇的地方。虽然现在能够访问图片，但是对它还什么也没有做。</P><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD><IMG height=1 alt=""
src="掌握 Ajax，第 6 部分 建立基于 DOM 的 Web 应用程序.files/blue_rule.gif"
width="100%"><BR><IMG height=6 alt=""
src="掌握 Ajax，第 6 部分 建立基于 DOM 的 Web 应用程序.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，第 6 部分 建立基于 DOM 的 Web 应用程序.files/c.gif"
width="100%"><BR>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD vAlign=center><IMG height=16 alt=""
src="掌握 Ajax，第 6 部分 建立基于 DOM 的 Web 应用程序.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-ajaxintro6/#main"><B>回页首</B></A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR>
<P><A name=3><SPAN class=atitle>修改图片，麻烦的办法</SPAN></A></P>
<P>完成所需修改有两种方法：一种简单，一种麻烦。和所有的好程序员一样，我也喜欢简单的办法；但是运用较麻烦的办法是一次很好的 DOM
练习，值得您花点时间。首先看看换图片比较麻烦的办法；后面再重新分析一下看看有没有更简单的办法。</P>
<P>用带兔子的新照片替换原有图片的办法如下：</P>
<OL>
<LI>创建新的 <CODE>img</CODE> 元素。
<LI>访问当前 <CODE>img</CODE> 元素的父元素，也就是它的容器。
<LI>在已有 <CODE>img</CODE> 元素<I>之前</I> 插入新的 <CODE>img</CODE>
元素作为该容器的子级。
<LI>删除原来的 <CODE>img</CODE> 元素。
<LI><A name=step5>结合起来</A>以便在用户单击 <B>Hocus Pocus!</B> 按钮时调用刚刚创建的
JavaScript 函数。 </LI></OL>
<P><A name=3.1><SPAN class=smalltitle>创建新的 img 元素</SPAN></A></P>
<P>通过上两期文章应该记住 DOM 中最关键的是 <CODE>document</CODE> 对象。它代表整个网页，提供了
<CODE>getElementById()</CODE>
这样功能强大的方法，还能够创建新的节点。现在要用到的就是这最后一种性质。</P>
<P>具体而言，需要创建一个新的 <CODE>img</CODE> 元素。要记住，在 DOM
中一切都是节点，但是节点被进一步划分为三种基本类型：</P>
<UL>
<LI>元素
<LI>属性
<LI>文本节点 </LI></UL>
<P>还有其他类型，但是这三种可以满足 99% 的编程需要。这里需要一个 <CODE>img</CODE> 类型的新元素。因此需要下列
JavaScript 代码：</P>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>var newImage = document.createElement("img");
</PRE></TD></TR></TBODY></TABLE><BR>
<P>这行代码可以创建一个 <CODE>element</CODE> 类型的新节点，元素名为 <CODE>img</CODE>。在
HTML 中基本上就是：</P>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode><img />
</PRE></TD></TR></TBODY></TABLE><BR>
<P>要记住，DOM 会创建结构良好的
HTML，就是说这个目前为空的元素包括起始和结束标签。剩下的就是向该元素增加内容或属性，然后将其插入到网页中。</P>
<P>对内容来说，<CODE>img</CODE> 是一个空元素。但是需要增加一个属性
<CODE>src</CODE>，它指定了要加载的图片。您也许认为要使用 <CODE>addAttribute()</CODE>
之类的方法，但情况并非如此。DOM
规范的制定者认为程序员可能喜欢简洁（的确如此！），因此他们规定了一个方法同时用于增加新属性和改变已有的属性值：<CODE>setAttribute()</CODE>。</P>
<P>如果对已有的属性调用 <CODE>setAttribute()</CODE>，则把原来的值替换为指定的值。但是，如果调用
<CODE>setAttribute()</CODE> 并指定一个<I>不</I> 存在的属性，DOM
就会使用提供的值增加一个属性。一个方法，两种用途！因此需要增加下列 JavaScript 代码：</P>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>var newImage = document.createElement("img");
<SPAN class=boldcode>newImage.setAttribute("src", "rabbit-hat.gif");</SPAN>
</PRE></TD></TR></TBODY></TABLE><BR>
<P>它创建一个图片元素然后设置适当的资源属性。现在，HTML 应该如<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro6/#listing4">清单
4</A> 所示。</P><BR><A name=listing4><B>清单 4. 使用 DOM 创建新图片</B></A><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>
<html>
<head>
<title>Magic Hat</title>
<script language="JavaScript">
function showRabbit() {
var hatImage = document.getElementById("topHat");
var newImage = document.createElement("img");
newImage.setAttribute("src", "rabbit-hat.gif");
}
</script>
</head>
<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" id="topHat" />
<br /><br />
<input type="button" value="Hocus Pocus!" />
</p>
</form>
</body>
</html>
</PRE></TD></TR></TBODY></TABLE><BR>
<P>可以加载该页面，但是不要期望有任何改变，因为目前所做的修改实际上还没有影响页面。另外，如果再看看任务列表中的<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro6/#step5">第
5 步</A>，就会发现还没有调用我们的 JavaScript 函数！</P>
<P><A name=3.2><SPAN class=smalltitle>获得原始图片的父元素</SPAN></A></P>
<P>现在有了要插入的图片，还需要找到插入的地方。但是不能将其插入到已有的图片中，而是要将其插入到已有图片之前然后再删除原来的图片。为此需要知道已有图片的父元素，实际上这就是插入和删除操作的真正关键所在。</P>
<P>应该记得，前面的文章中曾经指出 DOM
确实把网页看成一棵树，即节点的层次结构。每个节点都有父节点（树中更高层次的节点，该节点是它的一个子级），可能还有自己的子节点。对于图片来说，它没有子级
—— 要记住图片是空元素，但是它肯定有父节点。甚至不需要知道父节点是什么，但是需要访问它。</P>
<P>为此，只要使用每个 DOM 节点都有的 <CODE>parentNode</CODE> 属性即可，比如：</P>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>var imgParent = hatImage.parentNode;
</PRE></TD></TR></TBODY></TABLE><BR>
<P>确实非常简单！可以肯定这个节点有子节点，因为已经有了一个：原来的图片。此外，完全不需要知道它是一个
<CODE>div</CODE>、<CODE>p</CODE> 或者页面的 <CODE>body</CODE>，都没有关系！</P>
<P><A name=3.3><SPAN class=smalltitle>插入新图片</SPAN></A></P>
<P>现在得到了原来图片的父节点，可以插入新的图片了。很简单，有多种方法可以添加子节点：</P>
<UL>
<LI><CODE>insertBefore(newNode, oldNode)</CODE>
<LI><CODE>appendChild(newNode)</CODE> </LI></UL>
<P>因为希望把新图片放在旧图片的位置上，需要使用 <CODE>insertBefore()</CODE>（后面还要使用
<CODE>removeChild()</CODE> 方法）。可使用下面这行 JavaScript
代码把新图片元素插入到原有图片之前：</P>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>var imgParent = hatImage.parentNode;
<SPAN class=boldcode>imgParent.insertBefore(newImage, hatImage);</SPAN>
</PRE></TD></TR></TBODY></TABLE><BR>
<P>现在原图片的父元素有了<I>两个</I> 子元素：新图片和紧跟在后面的旧图片。必须指出，这里<I>包围</I>
这些图片的内容没有变，而且这些内容的顺序也和插入之前完全相同。仅仅是这个父节点中增加了一个子节点，即旧图片之前的新图片。</P>
<P><A name=3.4><SPAN class=smalltitle>删除旧图片</SPAN></A></P>
<P>现在只需要删除旧图片，因为网页中只需要新图片。很简单，因为已经得到了旧图片元素的父节点。只要调用
<CODE>removeChild()</CODE> 并把需要删除的节点传递给它即可：</P>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>var imgParent = hatImage.parentNode;
imgParent.insertBefore(newImage, hatImage);
<SPAN class=boldcode>imgParent.removeChild(hatImage);</SPAN>
</PRE></TD></TR></TBODY></TABLE><BR>
<P>现在，用新图片替换旧图片的工作已基本完成了。HTML 应该如<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro6/#listing5">清单
5</A> 所示。</P><BR><A name=listing5><B>清单 5. 用新图片替换旧图片</B></A><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>
<html>
<head>
<title>Magic Hat</title>
<script language="JavaScript">
function showRabbit() {
var hatImage = document.getElementById("topHat");
var newImage = document.createElement("img");
newImage.setAttribute("src", "rabbit-hat.gif");
var imgParent = hatImage.parentNode;
imgParent.insertBefore(newImage, hatImage);
imgParent.removeChild(hatImage);
}
</script>
</head>
<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" id="topHat" />
<br /><br />
<input type="button" value="Hocus Pocus!" />
</p>
</form>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -