zoukankan      html  css  js  c++  java
  • dom 节点篇---模块

    改写成如下代码:
    var creatTag=(function(){
    //var count=5;
    var oUl=document.createElement('ul');
    var oDiv=document.createElement('div');
    var oText=document.createTextNode('添加新项:');
    var oInpu=document.createElement('input');
    var oBtn=document.createElement('button');
    var oTxt=document.createTextNode('点击');
    var oBtn1=document.createElement('button');
    var oTx=document.createTextNode('删除');
    var appChd=function(){
    oBtn.appendChild(oTxt);
    oBtn1.appendChild(oTx);
    oDiv.appendChild(oInpu);
    oDiv.insertBefore(oText,oInpu);//insertbefore 添加一个参数是总是报错,得两个参数
    //oUl.appendChild(oDiv);
    document.body.appendChild(oUl);
    document.body.appendChild(oDiv);
    document.body.appendChild(oBtn);
    document.body.appendChild(oBtn1);
    };
    var addTag=function(){
    var intV=oInpu.value;//获取到的值
    var aLi=document.createElement('li');
    var intN=document.createTextNode(intV);//创建一个文本节点,把获取到的值,放进去
    aLi.appendChild(intN);
    //oUl.appendChild(aLi);新添加的节点都放到最后了
    if(oUl.childNodes.length==0){ //判断一下,父结点里面的子节点是否存在,如果不存在执行append语句
    //alert(1);
    oUl.appendChild(aLi);
    }else{
    oUl.insertBefore(aLi,oUl.firstChild);
    }
    };

    var revTag=function(){
    if(oUl.hasChildNodes()){
    //oUl.removeChild(oUl.firstChild);//删除父节点里面的第一个节点
    oUl.removeChild(oUl.lastChild);//删除父结点里面的最后一个节点
    //oUl.removeChild(oUl.childNodes[3]);//删除父节点里面任意一个位置的子节点,oUl.childNodes[i],i可以为任意值
    }
    };

    return {

    appChd:appChd,
    addTag:addTag,
    revTag:revTag,
    obtn:oBtn,
    obtn1:oBtn1
    };


    })();
    //创建元素函数
    creatTag.appChd();
    //添加节点
    creatTag.obtn.onclick=function(){
    creatTag.addTag();
    }
    //删除节点,函数被事件绑定以后,函数名后面不加括号
    creatTag.obtn1.onclick= creatTag.revTag;
    //插入节点,有两种方式,appendChild 和insertbefore 二者的区别比较 appendChild是在指定节点里面插入一个新节点,位置是在最后面,insertBefore(新节点,已存在节点的位置);插在指定节点里面的第一个节点位置

    </script>

    重点,两种不同写法的事件调用函数

  • 相关阅读:
    Co.
    编程
    编程
    编程
    数据同步
    Co.
    Co.
    Co.
    Co.
    sss
  • 原文地址:https://www.cnblogs.com/daiwenru/p/6259313.html
Copyright © 2011-2022 走看看