DOM 小记

创建一个文档片段，可以减少渲染次数，优化页面加载效果

document.createDocumentFragment()

var navbar = document.querySelector('.navbar');
var fragment = document.createDocumentFragment();
for(var i=0;i<5;i++){
  var li = document.createElement('li');
  var text = document.createTextNode('hello'+i);
  fragment.appendChild(text);
}
navbar.appendChild(fragment);
将新增加的 li 一次性逐次赋给 fragment，然后由 fragment 一次性赋给ul，页面只需渲染一次

自定义事件实例

<body>
  <div class="box box1">
    <input type="text">
  </div>
  <div class="box box2"></div>
  <script>
    var EventCenter = {
  on: function(type, handler){
    document.addEventListener(type, handler)
  },
  fire: function(type, data){
    return document.dispatchEvent(new CustomEvent(type, {
      detail: data
    }))
  }
}

document.querySelector('.box1 input').oninput=function(){
  EventCenter.fire('box1input',this.value)
}

EventCenter.on('box1input',function(e){
  document.querySelector('.box2').innerText = e.detail;
})
  </script>
</body>

DOM 小记

推荐阅读更多精彩内容