用HTML DOM实现有条件地渲染网页元素(上)

简介: 用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>

4 代码运行效果

image.png

5 小结

我们对原代码顺利完成了引入HTMLDOM 所需要的改造,尽管改造后有些地方的代码行数比原来有所增加。

但在更大型的应用系统中,这种改造不一定会增加代码行数。

改造之后,代码可读性更强,修改和维护效率将会得到提高。


相关文章
|
12天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
25天前
|
前端开发
html渲染优先级
html渲染优先级
27 0
|
18天前
|
存储 移动开发 前端开发
HTML基础知识:构建网页的基石
【10月更文挑战第11天】HTML基础知识:构建网页的基石
53 0
|
21天前
|
数据安全/隐私保护 C++
【HTML】构建网页的基石
本文介绍了HTML的基本概念和常用标签,包括HTML文件的基本结构、常见标签(如标题、段落、换行、图片、超链接等)、表格与表单的使用方法,以及无语义标签div和span的特性。通过具体示例展示了如何在VS Code中快速生成HTML框架及各标签的应用场景,帮助初学者快速掌握HTML的基础知识。
38 1
【HTML】构建网页的基石
|
10天前
HTML 元素
HTML文档由HTML元素定义,元素包括开始标签、内容和结束标签。某些元素内容为空,可在开始标签中关闭。大多数元素可拥有属性,且元素间可相互嵌套,形成复杂结构。
|
22天前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
36 4
|
24天前
|
JavaScript
在Vue中获取DOM元素的实际宽高
【10月更文挑战第2天】
146 1
|
23天前
|
数据采集 数据安全/隐私保护
html常见的表单元素有哪些,html表单元素有哪些?
html常见的表单元素有哪些,html表单元素有哪些?
13 0
|
27天前
|
JavaScript 前端开发
DOM的概念?获取html元素的方法有哪些?
DOM的概念?获取html元素的方法有哪些?
28 0