用HTML DOM实现有条件地渲染网页元素（上）-阿里云开发者社区

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>