Write By Monkeyfly

以下内容均为原创，如需转载请注明出处。

前提

今天学习了DOM基础方面的知识，可谓是收获颇丰。在重新认真学习JavaScript的过程，对比第一次学习而言，体会就是不一样。虽然整体感觉轻松了许多，但书中还是有很多细小琐碎的知识点值得思索和推敲。在我看来，有一本优秀的入门教程书是多么的重要，因为它不但会提升我学习的兴趣，而且可以促进我更快地学习和掌握知识。至少这本书是我目前为止碰到过的最好的JavaScript基础教程，没有之一。我并不是给这本书打广告，而是真心实意的推荐给大家，全名是《Web前端开发精品课之JavaScript基础教程》。

题外话

当初在大学期间自学web前端的过程中，在图书馆借了很多有关HTML与CSS教程的书，在快速翻看完所有的书之后，选定了这本名为《Web前端开发精品课之HTML与CSS进阶教程》的书，然后就借回去学习了。最主要的原因还是外观吸引了我，对比同类的书，这本书外观新奇而且内容也符合我的要求（因为当时HTML与CSS的基础知识都学完了，想找一本进阶的书学习学习），于是就将它顺理成章地收入囊中了。其实，一般书的整体内容都差不多，粗看目录也看不出来区别，而且基本所有的书都大同小异，只需要根据自己的需求和喜好，花费几分钟的时间大致翻看、浏览一下就能发现这本书是不是你想要的了。
大四第二学期开始，学院给我们组织安排了生产实习，虽然是在学校机房，但总的来说考虑的还算周到，总比没有强吧。其实，就是学院与其他单位进行了合作，在我们找工作之前，找一些人来带着我们做一些小项目，至少能给简历润色几分，不至于到时候简历上的项目经历一栏都是空白，（不过说实话，在这之前我还就真的没有任何web项目经历和经验，一直都在看视频，看书学习，从来没实战过，正想着借此机会练练手呢，谁知道居然讲的是Android项目，只好直接无视）。于是，在实习期间我就一直在看这本书，几乎没听过老师讲课，毕竟与自己的学习方向不符合，在这里浪费时间还不如利用这段时间自学，然后就用了两周的时间把这本书看完了，上面的案例也都自己手动敲了一遍（现在才感觉到：其实手动敲1遍真的太少，因为你会发现没过多久就把书上学到的技巧忘光了，所以复习很重要，当然，理解和记忆同样重要），觉得自己大致掌握了书本中的内容后，就开始出去找工作了。

扯远了，扯远了，不扯了，现在回到正题。

先看一下最终效果图：

我今天的学习内容如下：

1.什么是DOM？
2.DOM结构
3.节点类型
4.如何获取DOM元素；
5.如何创建DOM元素；
6.如何插入DOM元素；
7.如何删除DOM元素；

问题描述：

在练习知识点7案例的过程中，基于案例本身想增加一个功能，在实现的过程中发现了这个问题。有想法但是没办法用代码写出来，测试了好多次都失败了，实在是没办法实现，只能去群里求助大神，最终找到了解决办法。

现场还原

功能说明：为了用原生JS实现动态插入和删除DOM元素。

案例描述：页面中包含一个ul无序列表，一个input输入框和三个按钮。其中，ul元素包含3个li元素。

方法实现：

• 创建一个li元素节点和一个textNode文本节点，动态获取输入框的value值，赋值给textNode文本节点，然后将得到的textNode文本节点插入li元素当中，接着将组合好的li元素节点尾插在ul元素节点中，可分别实现尾插和头插。
• 删除呢，就是，判断输入框的值是否和现有li元素的innerHTML值相等，有就删没有就不删，并且提示“删除失败！”。

解释说明：

• 尾插：appendChild( newnode )方法——在父元素内部的最后一个子元素的后面插入一个新元素
• 头插：insertChild( newnode , exsitingnode )方法——在父元素内部已存在的任意一个子元素前面插入一个新元素
• 其实，我称之为“任意子元素之前插入”，可以简称为“头插”。

HTML代码如下:

<ul id="list">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<input id="txt" type="text" placeholder="请输入要插入的内容">
<input id="btn1" type="button" value="尾插"><!-- 上面的换行会被折算为一个空格并且在页面显示出来 -->
<input id="btn2" type="button" value="头插">
<input id="btn3" type="button" value="删除">

静态页面如图所示：

JS代码如下：

<script>
//当页面加载完毕时调用
window.onload = function(){
    document.title = "插入元素";

    /*功能1：尾插子元素*/
    var oBtn1 = document.getElementById("btn1");
    //给按钮添加（注册）点击事件
    oBtn1.onclick = function(){
        //首先，获取到下面要用到的相关元素
        var oUl = document.getElementById("list");
        var oTxt = document.getElementById("txt");

        //然后，必须新创建一个空的li元素，用于放置新增的内容
        var oLi1 = document.createElement("li");
        //接下来，得到输入框的值
        var value = oTxt.value;
        //然后，创建一个文本节点，文本内容设为输入框的值
        var textNode = document.createTextNode(value);
        //再将文本节点插入到li元素中，此时li元素已组装完成
        oLi1.appendChild(textNode);
        //最后将li元素插入到ul元素中
        oUl.appendChild(oLi1);
    }

    /*功能2：任意子元素之前插入，此处称为头插*/
    var oBtn2 = document.getElementById("btn2");
    oBtn2.onclick = function(){
        //先获取要用的元素
        var oUl = document.getElementById("list");
        var oTxt = document.getElementById("txt");
        var oLi = document.getElementsByTagName("li");
        //新建一个li元素
        var oLi2 = document.createElement("li");
        //新建一个文本节点，内容为输入框的值
        var textNode = document.createTextNode(oTxt.value);
        oLi2.appendChild(textNode);
        //最后将新建的li元素，插入到ul中的指定的一个子元素前面
        //注意：两个参数缺一不可！！！
        // oUl.insertBefore(oLi2,oLi[0]); 这两种方法等价
        oUl.insertBefore(oLi2,oUl.firstElementChild);
    }

    /*新掌握的知识：
    firstElementChild   首个子元素节点
    lastElementChild    最后的子元素节点
    */

    /*功能3：删除任意子元素*/
    var oBtn3 = document.getElementById("btn3");
    oBtn3.onclick = function(){
        var oUl = document.getElementById("list");
        var oTxt = document.getElementById("txt");
        var oLi = document.getElementsByTagName("li");
        var value = oTxt.value;
        //innerHTML用于获取标签之间的文本内容
        console.log(oLi[0].innerHTML);
        /*最初写的代码，无法实现*/
        for (var i = 0; i < oLi.length; i++) {
            if( oLi[i].innerHTML !== value){
                alert("该元素不存在，删除失败！");
                continue;
            }else{
                oUl.removeChild(oLi[i]);
            }
        }
    }
}
</script>

问题所在：

/*
alert在每次循环都会执行，我只想让它在最后一次循环结束后执行。
换句话说，也就是在遍历完数组中的所有元素后，发现未找到该元素，
此时alert一下，就是不知道这个alert语句应该写在哪个地方。
*/
//简而言之就是，想让找不到的最后一次才弹出显示。

之后实在找不到解决办法，就去群里请教了一番，这才知道原因在哪里——逻辑方面的问题。
因为要等所有的li元素都遍历之后，才能判断li元素中是否包含要插入的元素。
我们不希望看到执行一次循环alert()语句就被触发一次，这显然不行，所以alert()语句就不能在for循环中写。
但是，如果写在循环中，每循环一次都会执行到该语句，所以这个逻辑还有点欠缺。总感觉缺点什么东西，就是不知道到底缺什么。

其实，欠缺的是如何判断这个情况到底有没有发生。
问：哪种情况呢？
答：即【遍历过所有的li元素后，它的innerHTML值都与文本框的value值不相等】 这一情况。

问：通过哪种方式去判断呢？
答：在条件判断（就是if…else…）语句中加上一个标识（或称为开关，信号灯，旗帜）就行了。

比如说，在最开始定义一个标识，这么来说吧，用我们身边的事情举例，通俗易懂。
红绿灯大家都知道吧，红灯停绿灯行，这个规则也是提前制定好的，不能改变。在一开始，马路上就安置了一个红绿灯（即信号灯），而且规定红灯代表警告，禁止通行，绿灯代表允许，可以通行。

问：那么，放置红绿灯（即信号灯）的目的是什么呢？
答：目的就是为了当预定的事件来临时（这里指行人到达路口这一情况），所有人都能根据信号灯的颜色来判断当前应该怎么做，是停止还是通行。

现在就显而易见了，我们可以提前定义一个布尔（Boolean，逻辑）类型的变量，命名为flag，它的特性刚好就能代表那个信号灯，因为布尔类型的变量只有两个取值，false和true，可以分别表示红灯和绿灯。当然也可以定义为0和1，0可以表示alse，1可以表示true。

它应该不陌生吧，平时在好多的代码中都能遇见它。至少我见过好多次，但一直都不知道flag到底是干嘛用的，自然就想不起来用它。也有可能好多人都不知道该怎么使用，那么现在就让我们一起来好好认识一下这个所谓神奇的flag吧。

问：什么是flag呢？

答： 它的中文意思是“旗帜，或旗标”，FLAG是电脑程序中用于记录程序状态的一种标记，FLAG只有1（立起）和0（倒下）两个数值，它可以用来帮助程序做复杂条件的判断。但其实呢，flag是程序员自己定义的变量，作为一个标记（志），标记当前的进程，或者标记某种状态，用来控制程序的流向。只是因为在实际使用中方便好记才这么定义的。因为程序要实现的功能很多，为了区分各个程序段实现了什么功能就用标志位的值，然后使用if语句判断标志位的值，进入相应的程序实现相应的功能，当然flag的值由你来决定。

上面介绍了这么多，我们只需要知道：
flag是用来做标志的，程序运行的过程中flag会产生变化，flag=1就是给flag一个初始值1，然后在程序的运行过程中检测flag的值，如果它的值为1，则表示没有发生变化；如果flag的值为0，则表示发生变化了。最终就能以此来判断程序的执行情况。

现在，让我们重新来分析问题：

如果我们预期的不想看到的事件发生了，就手动赋值让flag=0；如果没有发生，就手动赋值让flag=1；刚好对应条件判断语句（就是if…else…）中的两种情况。现在我们也已经有了标识，最后呢，只要在for循环外面再用一次条件判断语句（就是if…else…），在语句内添加上flag产生不同的值时（即我们提前定义好的0和1或者true和false）所对应的不同处理方式，就能得到我们想要的效果了。

别人的思路指示如下图所示：

最终代码：

/*核心代码*/

//定义一个开关作为是否删除成功的标识
var flag;
for (var i = 0; i < oLi.length; i++) {
    if( oLi[i].innerHTML !== value){
        //flag值为0，表示删除失败
        flag = 0;
        continue;
    }else{
        oUl.removeChild(oLi[i]);
        //flag值为1，表示删除成功
        flag = 1;
    }
}
//根据flag的值判断是否删除成功
if(flag == 1){
    alert("删除成功！");
}else{
    alert("删除失败！");
}

最终效果图：

结束语

学会灵活变通的在程序中应用好标志位可以使程序更灵活。