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

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

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

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

从一个示例应用程序开始关于代码的说明为了把注意力集中到 DOM 和 JavaScript 代码上，我编写 HTML 的时候有些随意地采用内联样式（比如 h1 和 p 元素的 align 属性）。虽然对实验来说这样做是可接受的，但是对于开发的任何产品应用程序，我建议花点时间把所有的样式都放到外部 CSS 样式表中。

我们首先建立一个非常简单的应用程序，然后再添加一点 DOM 魔法。要记住，DOM 可以移动网页中的任何东西而不需要提交表单，因此足以和 Ajax 媲美；我们创建一个简单的网页，上面只显示一个普通的旧式大礼帽，还有一个标记为 Hocus Pocus! 的按钮（猜猜这是干什么的？）
初始 HTML 显示了这个网页的 HTML。除了标题和表单外，只有一个简单的图片和可以点击的按钮。
清单 1. 示例应用程序的 HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<html>
<head>
  <title>Magic Hat</title>
</head>

<body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
<p align="center">
<img src="topHat.gif" />
<br /><br />
<input type="button" value="Hocus Pocus!" />
</p>
  </form>
</body>
</html>

可以在本文后面的中找到这段 HTML 和本文中用到的图片。不过我强烈建议您只下载那个图片，然后随着本文中逐渐建立这个应用程序自己动手输入代码。这样要比读读本文然后直接打开完成的应用程序能够更好地理解 DOM 代码。
查看示例网页这里没有什么特别的窍门，打开网页可以看到所示的结果。
图 1. 难看的大礼帽

关于 HTML 的补充说明应该注意的重要一点是，和中按钮的类型是 button 而不是提交按钮。如果使用提交按钮，单击该按钮将导致浏览器提交表单，当然表单没有 action 属性（完全是有意如此），从而会造成没有任何动作的无限循环。（应该自己试试，看看会发生什么。）通过使用一般输入按钮而不是提交按钮，可以把 javaScript 函数和它连接起来与浏览器交互而无需提交表单。
向示例应用程序添加元素现在用一些 JavaScript、DOM 操作和小小的图片戏法装扮一下网页。
使用 getElementById() 函数显然，魔法帽子没有兔子就没有看头了。这里首先用兔子的图片替换页面中原有的图片（再看看），如所示。
图 2. 同样的礼帽，这一次有了兔子

完成这个 DOM 小戏法的第一步是找到网页中表示 img 元素的 DOM 节点。一般来说，最简单的办法是用 getElementById() 方法，它属于代表 Web 页面的 document 对象。前面已经见到过这个方法，用法如下：

1	var elementNode = document.getElementById("id-of-element");

为 HTML 添加 id 属性这是非常简单的 JavaScript，但是需要修改一下 HTML：为需要访问的元素增加 id 属性。也就是希望（用带兔子的新图片）替换的 img 元素，因此将 HTML 改为的形式。
清单 2. 增加 id 属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<html>
<head>
  <title>Magic Hat</title>
</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>

如果重新加载（或者打开）该页面，可以看到毫无变化，增加 id 属性对网页的外观没有影响。不过，该属性可以帮助 JavaScript 和 DOM 更方便地处理元素。
抓住 img 元素现在可以很容易地使用 getElementById() 了。已经有了需要元素的 ID，即 topHat，可以将其保存在一个新的 JavaScript 变量中。在 HTML 页面中增加所示的代码。
清单 3. 访问 img 元素

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

<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>

现在打开或重新加载该网页同样没有什么惊奇的地方。虽然现在能够访问图片，但是对它还什么也没有做。
修改图片，麻烦的办法完成所需修改有两种方法：一种简单，一种麻烦。和所有的好程序员一样，我也喜欢简单的办法；但是运用较麻烦的办法是一次很好的 DOM 练习，值得您花点时间。首先看看换图片比较麻烦的办法；后面再重新分析一下看看有没有更简单的办法。
用带兔子的新照片替换原有图片的办法如下：

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

创建新的 img 元素通过上两期文章应该记住 DOM 中最关键的是 document 对象。它代表整个网页，提供了 getElementById() 这样功能强大的方法，还能够创建新的节点。现在要用到的就是这最后一种性质。
具体而言，需要创建一个新的 img 元素。要记住，在 DOM 中一切都是节点，但是节点被进一步划分为三种基本类型：

元素
属性
文本节点

还有其他类型，但是这三种可以满足 99% 的编程需要。这里需要一个 img 类型的新元素。因此需要下列 JavaScript 代码：

1	var newImage = document.createElement("img");

这行代码可以创建一个 element 类型的新节点，元素名为 img。在 HTML 中基本上就是：

<img />

要记住，DOM 会创建结构良好的 HTML，就是说这个目前为空的元素包括起始和结束标签。剩下的就是向该元素增加内容或属性，然后将其插入到网页中。
对内容来说，img 是一个空元素。但是需要增加一个属性 src，它指定了要加载的图片。您也许认为要使用 addAttribute() 之类的方法，但情况并非如此。DOM 规范的制定者认为程序员可能喜欢简洁（的确如此！），因此他们规定了一个方法同时用于增加新属性和改变已有的属性值：setAttribute()。
如果对已有的属性调用 setAttribute()，则把原来的值替换为指定的值。但是，如果调用 setAttribute() 并指定一个不存在的属性，DOM 就会使用提供的值增加一个属性。一个方法，两种用途！因此需要增加下列 JavaScript 代码：

1 2	var newImage = document.createElement("img"); newImage.setAttribute("src", "rabbit-hat.gif");

它创建一个图片元素然后设置适当的资源属性。现在，HTML 应该如所示。
清单 4. 使用 DOM 创建新图片

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

<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>

可以加载该页面，但是不要期望有任何改变，因为目前所做的修改实际上还没有影响页面。另外，如果再看看任务列表中的，就会发现还没有调用我们的 JavaScript 函数！

收藏分享评分

回复引用

订阅 TOP

返回列表