0 前言
在 关于Vue学习笔记6中纯JavaScript实现的改进优化1_PurpleEndurer@5lcto的技术博客_51CTO博客 中，我们提到了两个进一步优化的方向，其中一个方面是把表示水果的选项信息存在一个数组里，通过JavaScript输出<li>元素描述代码给用户进行选择，这个我们已经在 关于Vue学习笔记6中纯JavaScript实现的改进优化2_PurpleEndurer@5lcto的技术博客_51CTO博客中实现。
现在我们就来实现另一个优化的方向：增加文本框，允许用户输入自己喜欢的水果名称，并添加到水果选项列表中。
1 比较两种实现方法
要实现动态添加网页元素，有两种方法，一种方法是直接向容器的innerHTML追加代码，另一种方式是通过HTML DOM。
这两种方法各有利弊：
直接向容器的innerHTML追加代码的方法，实现起来修改不多，可以以较快的速度来完成，但今后维护更新不方便。
通过HTML DOM来动态添加网页元素的方法，要修改的地方较多，改动范围较大，但今后维护比较容易。
权衡利弊，我们决定先使用第2种方法——HTML DOM。
首先我们要使用HTMLDOM 完成原来代码的改造。
2 引入HTML DOM
我们以 关于Vue学习笔记6中纯JavaScript实现的改进优化2_PurpleEndurer@5lcto的技术博客_51CTO博客中的代码
<script> function showFruit(v) { //var oUL = document.getElementById('ulFruit'); //alert(oUL.childElementCount); var coLi = document.getElementById('ulFruit').children; //alert(coLi.length); for (var i = 0; i < coLi.length; i++) { //alert(coLi[i].title); coLi[i].style.display = (v==coLi[i].innerText ? "list-item" : "none"); } // for } // showFruit(v) var aFruits = new Array(['苹果', 'Apple', 'red'], ['桔子', 'Orange', 'orange'], ['葡萄', 'Grape', 'purple'], ['芒果','Mango','yellow'],//增加芒果信息 ['其它', 'Other', 'blue']); function genFruitOption() { for (var i=0; i<aFruits.length; i++) { document.write('<p><label><input type="radio"value="', aFruits[i][0], '" name="fruit" onchange="showFruit(this.value)" />', aFruits[i][0], '</label></p>'); } //for } //genFruitOption() function genFruitLi() { for (var i=0; i<aFruits.length; i++) { document.write('<li id="li', aFruits[i][1], '" style="color:', aFruits[i][2], '">', aFruits[i][0], '</li>'); } //for } //genFruitLi() </script> <p>用JavaScript响应click事件有条件地渲染网页元素</p> <p>（使用数组存储水果信息）</p> <p style="margin-left:20%; color:purple; font-weight:bold;"> by PurpleEndurer </p> <p>你喜欢哪种水果？</p> <script> genFruitOption(); </script> <p>你喜欢的是：</p> <ul id="ulFruit"> <script> genFruitLi(); </script> </ul>
为基础进行改造。
2.1 修改网页元素描述代码
我们只需要修改2个地方。
2.1.1 修改技术改进说明
将
<p>（使用数组存储水果信息）</p>
改为
<p>（引入HTML COM技术改造）</p>
2.1.2 为用户水果选项增加容器
为了实现用户水果选项网页元素的动态添加，我们需要把用户水果选项网页元素描述代码放在一个容器中，最简单的实现办法就是在用户水果选项网页元素描述代码套上<div id="divFruit"></div>，即将
<p>你喜欢哪种水果？</p> <script> genFruitOption(); </script>
改为：
<p>你喜欢哪种水果？</p> <div id="divFruit"> <script> genFruitOption(); </script> </div>
需要注意的是，我们为新增加的<div>容器指定了id为"divFruit"。这个id我们在改造genFruitOption()时会用到。
2.2 修改JavaScript脚本
改造主要集中在JavaScript脚本这块。
2.2.1 修改genFruitOption()
在genFruitOption()中，原来只有一个for语句循环，其中的循环体是使用document.write函数直接输入页面元素描述代码。
document.write('<p><label><input type="radio"value="', aFruits[i][0], '" name="fruit" onchange="showFruit(this.value)" />', aFruits[i][0], '</label></p>');
这里涉及到<p><label>和<input>三个页面元素。
2.2.1.1 增加网页元素对象变量定义
现在用HTML COM来实现，首先我们要为<p><label>和<input>三个页面元素增加对象变量的定义，同时给id为'divFruit'的div的也增加一个对象变量的定义，即增加以下4行代码：
var oDivFruit = document.getElementById('divFruit'); var oP;//<p>对象 var oIn;// <input>对象 var oLa;// <label>对象
2.2.1.2 修改 for语句的循环体
我们要使用HTML COM技术增加每个用户水果选项对应的网页元素，包括<p><label>和<input>。
即是将：
for (var i=0; i<aFruits.length; i++) { document.write('<p><label><input type="radio"value="', aFruits[i][0], '" name="fruit" onchange="showFruit(this.value)" />', aFruits[i][0], '</label></p>'); } //for
相应地改为：
for (var i=0; i<aFruits.length; i++) { //创建<p> oP = document.createElement("P"); //创建<input type="raido"> oIn = document.createElement("input"); oIn.type = 'radio'; //类型 oIn.name = "fruit"; // oIn.id = 'ra' + aFruits[i][1]; //id oIn.value = aFruits[i][0]; //值 oIn.addEventListener("click", showFruit); //增加click事件监听器 //创建<label> oLa = document.createElement('label') oLa.htmlFor = 'ra' + aFruits[i][1]; oLa.appendChild(document.createTextNode(aFruits[i][0])); //向<div>容器追加网页元素<P><input><label>对象 oDivFruit.appendChild(oP); oDivFruit.appendChild(oIn); oDivFruit.appendChild(oLa); } //for
需要指出的是，使用HTML COM改造后，我们使用addEventListener函数来给用户水果选项对应的网页元素增加click事件监听器 showFruit，这个监听器有默认的输入参数，不再需要指定原来的输入参数this.value。
虽然改造后的代码，从行数来看，比之前多了许多，从10行变成了 23行，多了13行，不过代码更容易阅读，也更容易修改和维护了。
2.2.2 修改genFruitLi()
在genFruitLi()中，原来只有一个for语句循环，其中的循环体是使用document.write函数直接输入页面元素描述代码：
document.write('<li id="li', aFruits[i][1], '" style="color:', aFruits[i][2], '">', aFruits[i][0], '</li>');
这里只涉及一个网页元素<li>。使用HTML COM改造也就比修改genFruitOption()容易一些。
2.2.2.1 增加网页元素对象变量定义
为了动态增加网页元素，我们需要增加<UL>和<LI>两个页面元素对象的定义：
var oUL = document.getElementById('ulFruit'); var oLi;
2.2.2.2 修改for语句的循环体
将
for (var i=0; i<aFruits.length; i++) { document.write('<li id="li', aFruits[i][1], '" style="color:', aFruits[i][2], '">', aFruits[i][0], '</li>'); } //for
改为
for (var i=0; i<aFruits.length; i++) { oLi = document.createElement("li"); oLi.appendChild(document.createTextNode(aFruits[i][0])); oLi.style.color = aFruits[i][2]; //设置颜色 oUL.appendChild(oLi); } //for 1.
修改前的代码行数是13行，修改后的代码行数为仍然是13行（包括1个空行）。
2.2.3 修改监听器 showFruit()
修改前的监听器 showFruit(v)会显式地接收1个传入参数this.value。
在我们使用addEventListener函数来给用户水果选项对应的网页元素增加click事件监听器 showFruit后，这个监听器有默认的输入参数，这个参数的值和含义与显式地接收1个传入参数不同，所以我们一般用e来代表这个默认的输入参数。
2.2.3.1 修改函数输入参数
将
function showFruit(v)
改为
function showFruit(e)
2.2.3.2 修改函数体内使用传入参数的语句
由于使用HTML COM改造后的监听器函数传入参数的值和含义和之前不同，所以函数体内使用传入参数的语句要做相应的修改。
在showFruit()中，使用传入参数的语句只有一句，就是for语句循环体中用来控制水果元素显示的代码：
coLi[i].style.display = (v==coLi[i].innerText ? "list-item" : "none");
要改为：
coLi[i].style.display = (e.target.value==coLi[i].innerText ? "list-item" : "none");
也就是用 e.target.value 来代替原来的传入参数v。
至此，我们的改造就完成了。
3 改造后的最终代码
综合以上修改后的最终代码如下：
<script> function showFruit(e) { //var oUL = document.getElementById('ulFruit'); //alert(oUL.childElementCount); var coLi = document.getElementById('ulFruit').children; //alert(coLi.length); for (var i = 0; i < coLi.length; i++) { //alert(coLi[i].title); coLi[i].style.display = (e.target.value==coLi[i].innerText ? "list-item" : "none"); } // for } // showFruit(v) var aFruits = new Array(['苹果', 'Apple', 'red'], ['桔子', 'Orange', 'orange'], ['葡萄', 'Grape', 'purple'], ['芒果','Mango','yellow'], ['其它', 'Other', 'blue']); function genFruitOption() { var oDivFruit = document.getElementById('divFruit'); var oP;//<p>对象 var oIn;// <input>对象 var oLa;// <label>对象 for (var i=0; i<aFruits.length; i++) { //创建<p> oP = document.createElement("P"); //创建<input type="raido"> oIn = document.createElement("input"); oIn.type = 'radio'; //类型 oIn.name = "fruit"; // oIn.id = 'ra' + aFruits[i][1]; //id oIn.value = aFruits[i][0]; //值 oIn.addEventListener("click", showFruit); //增加click事件监听器 //创建<label> oLa = document.createElement('label') oLa.htmlFor = 'ra' + aFruits[i][1]; oLa.appendChild(document.createTextNode(aFruits[i][0])); //向<div>容器追加网页元素<P><input><label>对象 oDivFruit.appendChild(oP); oDivFruit.appendChild(oIn); oDivFruit.appendChild(oLa); } //for } //genFruitOption() function genFruitLi() { var oUL = document.getElementById('ulFruit'); var oLi; for (var i=0; i<aFruits.length; i++) { oLi = document.createElement("li"); oLi.appendChild(document.createTextNode(aFruits[i][0])); oLi.style.color = aFruits[i][2]; //设置颜色 oUL.appendChild(oLi); } //for } //genFruitLi() </script> <p>用JavaScript响应click事件有条件地渲染网页元素</p> <p>（引入HTML COM技术改造）</p> <p style="margin-left:20%; color:purple; font-weight:bold;"> by PurpleEndurer </p> <p>你喜欢哪种水果？</p> <div id="divFruit"> <script> genFruitOption(); </script> </div> <p>你喜欢的是：</p> <ul id="ulFruit"> <script> genFruitLi(); </script> </ul>
4 代码运行效果
5 小结
我们对原代码顺利完成了引入HTMLDOM 所需要的改造，尽管改造后有些地方的代码行数比原来有所增加。
但在更大型的应用系统中，这种改造不一定会增加代码行数。
改造之后，代码可读性更强，修改和维护效率将会得到提高。
