Dom基础2

作者: Monee121 | 来源:发表于2018-03-30 12:27 被阅读0次

JavaScript 高级程序设计(第12章 DOM2和DOM3
Dom基础2
19.DOM 进阶
十八
vuejs基础学习总结
DOM基础知识
per-courseDOM介绍
JavaScript的基础组成部分
DOM基础整理 - 2
渲染函数&JSX

DOM中级

创建元素 createElement、appendChild
添加元素的性能差异
insertBefore方法及实例
删除元素：removeChild方法
文档碎片：document.createDocumentFragment()
插一万个li,需要重绘一万次，用文档碎片，相当于先创建了一万个li,放了文档碎片，一起插入
性能测试方法

点击按钮创建li
<body>
<script>
window.onload = function(){
  var oBtn=document.getElementById('oBtn');
  var oUll=document.getElementById('oUl');
  
  oBtn.onclick=function(){
       var oLi=document.createElement('li'); //添加li元素
       oUll.appendChild(oLi);
  } 
}
</script>
<div>
<input type="button" id="oBtn" />
  <ul id="oUl">
    <li id="oLi">111</li>
  </ul>
</div>

</body>

创建li2:点击按钮把文本框的值加到li
<body>
<script>
window.onload = function(){
  var oTxt=document.getElementById('oTxt');
  var oBtn=document.getElementById('oBtn');
  var oUll=document.getElementById('oUl');
  
  oBtn.onclick=function(){
       var oLi=document.createElement('li');
       oLi.innerHTML=oTxt.value; //把文本框的值赋给创建的li
       oUll.appendChild(oLi);
  } 
}
</script>
<div>
<input type="text" id="oTxt" />
<input type="button" id="oBtn" />
  <ul id="oUl">
    <li id="oLi">111</li>
  </ul>
</div>

</body>

创建li3（insertBefor）:点击按钮把文本框文本添加的所有文本之前，类似发微博
<script>
  // insertBefore(子节点，谁之前);
window.onload = function(){
  var oTxt=document.getElementById('oTxt');
  var oBtn=document.getElementById('oBtn');
  var oUll=document.getElementById('oUl');
 
  oBtn.onclick=function(){
       var oLi=document.createElement('li');
       var oAli=document.getElementsByTagName('li');//在原先li之前
       oLi.innerHTML=oTxt.value;
       oUll.insertBefore(oLi,oAli[0]);//原先li的第一个
  } 
}
</script>
<div>
<input type="text" id="oTxt" />
<input type="button" id="oBtn" />
  <ul id="oUl">
    <li>111</li>
  </ul>
</div>

解决上述没有insertBefore第二个参数时，用insertBefore插入元素的bug，方法是判断下，然后添加一个
<body>
<script>
  // insertBefore(子节点，谁之前);
window.onload = function(){
  var oTxt=document.getElementById('oTxt');
  var oBtn=document.getElementById('oBtn');
  var oUll=document.getElementById('oUl');
 
  oBtn.onclick=function(){
       var oLi=document.createElement('li');
       var oAli=document.getElementsByTagName('li');//在原先li之前，第二个参数
       oLi.innerHTML=oTxt.value;
        if(oAli.length==0){
            oUll.appendChild(oLi);
        }
        else{
            oUll.insertBefore(oLi,oAli[0]);//原先li的第一个
        }      
  } 
}
</script>
<div>
<input type="text" id="oTxt" />
<input type="button" id="oBtn" />
  <ul id="oUl">
   
  </ul>
</div>

删除li
<body>
<script>
window.onload = function(){
var oUl=document.getElementById('oUl');
var oA=document.getElementsByTagName('a');
var oLi=document.getElementsByTagName('li');
   
for(i=0;i<oLi.length;i++){
    
 oA[i].onclick=function(){ 
    oUl.removeChild(this.parentNode);
 } 
 
}
}
</script>
<ul id="oUl">
 <li>sdjfdkfj<a href="javascript:;">删除</a></li>
 <li>sdjfdkfj<a href="javascript:;">删除</a></li>
 <li>sdjfdkfj<a href="javascript:;">删除</a></li>
 <li>sdjfdkfj<a href="javascript:;">删除</a></li>
</ul>
</body>

文档碎片插入100000个li,理论上提高Dom操作性能
<script type="text/javascript">
window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    var oUl=document.getElementById('ul1');
    
    oBtn.onclick=function ()
    {
        var iStart=new Date().getTime();
        var oFrag=document.createDocumentFragment();
        var i=0;
        
        for(i=0;i<100000;i++)
        {
            var oLi=document.createElement('li');
            
            oFrag.appendChild(oLi);
        }
        
        oUl.appendChild(oFrag);
        
        alert(new Date().getTime()-iStart);
    }
}
</script>
</head>

<body>
<input id="btn1" type="button" value="碎片"/>
<ul id="ul1">
</ul>
</body>

原始写法
<script type="text/javascript">
window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    var oUl=document.getElementById('ul1');
    
    oBtn.onclick=function ()
    {
        var iStart=new Date().getTime();
        var i=0;
        
        for(i=0;i<100000;i++)
        {
            var oLi=document.createElement('li');
            
            oUl.appendChild(oLi);
        }
        
        alert(new Date().getTime()-iStart);
    }
}
</script>
</head>

<body>
<input id="btn1" type="button" value="普通"/>
<ul id="ul1">
</ul>
</body>