建立基于 DOM 的 Web 应用程序（3）

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-7-20 21:19 | 只看该作者

建立基于 DOM 的 Web 应用程序（3）

替换图片，简单的办法如果回顾替换图片的步骤，再看看节点的各种方法，可能会注意到方法 replaceNode()。该方法可用于把一个节点替换为另一个节点。再考虑一下前面的步骤：

创建新的 img 元素。
访问当前 img 元素的父元素，也就是它的容器。
在已有 img 元素之前插入新的 img 元素作为该容器的子元素。
删除原来的 img 元素。
连接起来以便在用户点击 Hocus Pocus! 的时候调用刚刚创建的 JavaScript 函数。

使用 replaceNode() 可以减少需要的步骤数。可以将第 3 步和第 4 步合并在一起：

创建新的 img 元素。
访问当前 img 元素的父元素，也就是它的容器。
用创建的新元素替换旧的 img 元素。
连接起来以便在用户点击 Hocus Pocus! 的时候调用刚刚创建的 JavaScript 函数。

这看起来不是什么大事，但确实能够简化代码。说明了这种修改：去掉了 insertBefore() 和 removeChild() 方法调用。
清单 6. 用新图片替换旧图片（一步完成）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<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.replaceChild(newImage, 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!" onClick="showRabbit();"  />
</p>
  </form>
</body>
</html>

当然这不是什么大的修改，但是说明了 DOM 编码中一件很重要的事：执行一项任务通常有多种方法。如果仔细审阅可用 DOM 方法看看是否有更简单的方法可以完成任务，很多时候都会发现可以将四五个步骤压缩为两三个步骤。
替换图片，（真正）简单的办法既然指出了执行一项任务几乎总是有更简单的方法，现在就说明用兔子图片替换帽子图片的简单得多 的办法。阅读本文的过程中有没有想到这种方法？提示一下：与属性有关。
要记住，图片元素很大程度上是由其 src 属性控制的，他引用了某个地方的文件（不论是本地 URI 还是外部 URL）。到目前为止，我们一直用新图片替换图片节点，但是直接修改已有图片的 src 属性要简单得多！这样就避免了创建新节点、寻找父节点和替换旧节点的所有工作，只要一步就能完成了：

1	hatImage.setAttribute("src", "rabbit-hat.gif");

这样就够了！看看，它显示了这种解决方案，包括整个网页。
清单 7. 修改 src 属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<html>
<head>
  <title>Magic Hat</title>
  <script language="JavaScript">
function showRabbit() {
   var hatImage = document.getElementById("topHat");
   hatImage.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!" onClick="showRabbit();"  />
</p>
  </form>
</body>
</html>

这是 DOM 最棒的一点：更新属性的时候网页马上就会改变。只要图片指向新的文件，浏览器就加载该文件，页面就更新了。不需要重新加载，甚至不需要创建新的图片元素！结果仍然和相同，只不过代码简单得多了。

收藏分享评分

回复引用

订阅 TOP

返回列表