Js学习---妙味课堂2-1

DOM元素+文档碎片

创建，插入，删除一个新的DOM元素：

例一：

window.onload = function(){
    var oUl=document.getElementById('ul1');
    var oBtn=document.getElementById('btn1');
       //注意！ 这里的var变量设置，也需要写在 window.onload里面！才会去即时实现它
    oBtn.οnclick=function(){
        // creatElement('标签名');
        var oLi=document.createElement('li');
        //父.appendChild(子节点)
        oUl.appendChild(oLi);
    }
}

// createElement('');  and  appendChile(名称);  // text中输入的值，可以通过其 value获得。

例二： 

window.onload = function(){
    var oUl=document.getElementById('ul1');
    var oBtn=document.getElementById('btn1');
    var oText1=document.getElementById('text1');
       //注意！ 这里的var变量设置，也需要写在 window.onload里面！才会去即时实现它
    oBtn.οnclick=function(){
        // creatElement('标签名');
        var oLi=document.createElement('li');
        oLi.innerHTML=oText1.value;
        //父.appendChild(子节点)
        oUl.appendChild(oLi);
    }
}

例三：---在某一元素之前插入。   使用  insertBefore(子节点，谁之前)

window.onload = function(){
    var oUl=document.getElementById('ul1');
    var oBtn=document.getElementById('btn1');
    var oText1=document.getElementById('text1');
       //注意！ 这里的var变量设置，也需要写在 window.onload里面！才会去即时实现它
    oBtn.οnclick=function(){
        // creatElement('标签名');
        var oLi=document.createElement('li');
        var aLi=oUl.getElementsByTagName('li');
        oLi.innerHTML=oText1.value;
        
        oUl.insertBefore(oLi,aLi[0]);
    }
}

//但是当之前没有li时，创建会报错。  解决方法： 加一个if  else 判断。

代码：

　　　　 if(aLi.length==0){
            oUl.appendChild(oLi);
        }
        else{
            oUl.insertBefore(oLi,aLi[0]);
        }

删除DOM元素：

--- removeChild();

window.onload = function(){
    var aA=document.getElementsByTagName('a'); //一定要注意大小写！！！
    var oUl=document.getElementById('ul1');
    var i=0;
    for(i=0;i<aA.length;i++){
        aA[i].onclick=function(){
            oUl.removeChild(this.parentNode);
        }
    }
}

 

文档碎片：--- 相当于一个口袋

可以提高DOM操作性能（理论上---减少渲染次数）

文档碎片原理

document.creat3DocumentFragment();

//其实一般不怎么用