DOM笔记

var container=document.getElementById('list');
for(var i=0;i<3;i++)
{
    var item=document.createElement('li');
    item.innerText=i+1;
    container.appendChild(item);
}

 使用DOM需要注意点：

1.变量命名：节点类的变量，加上nd前缀更加容易辨识。

2.选择符命名：给CSS用和JS用的选择符分开，给JS用的选择符加上js-或J-前缀，提高可读性

3.容错能力：对节点的存在性做检查，保证代码更加健壮

4.最小作用域原则：应该将代码包在声明即执行的函数表达式里，不产生全局变量，也避免变量名冲突风险。

处理大量DOM事件的方法：

使用事件委托

  var container=document.getElementById(js-'list');
  for(var i=0;i<300;i++)
  {
       var nditem=document.createElement('li');
       nditem.innerText=i+1;
       ndcontainer.appendChild(nditem);
  
      ndcontainer.addEvent('click',function(e){
        var target=e.target;
       if (target.tagName==='LI'){
          alert(target.innerHTML);
      }
   });     
  }

在每次循环中都会修改DOM结构，如果大循环执行时间过长，浏览器的渲染帧率过低将会导致卡顿，影响浏览效果。所以减少DOM操作次数、缩短循环时间可以坚持主线程阻塞的时间。

实用requestAnimationFrame以更加优化的方式，处理更大数量的DOM操作

(()=>{
    const ndContainer=document.getElementById('js-list');
    if (!ndContainer) {
        return ;
    }
    const total=30000;
    const batchSize=4; //每批插入的结点次数，越大渲染任务越繁重
    const batchCount=total/batchSize; //需要处理多少次
    let batchOne=0; //以完成处理的个数

    function appendItem(){
        const fragment=document.createDocumentFragment();
        for(let i=0;i<batchSize;i++){
            const ndItem=document.createElement('li');
            ndItem.innerText=(batchDone*batchSize)+i+1;
            fragment.appendChild(ndItem);
        }

        ndContainer.appendChild(fragment);
        batchDone+=1;
        doBatchAppend();
    }

    function doBatchAppend(){
        if (batchDone<batchCount) {
            window.requestAnimationFrame(appendItem);
        }
    }

    doBatchAppend();

    ndContainer.addEventListener('click',function(e){
        const target=e.target;
        if (target.tagName==='LI') {
            alert(target.innerHTML);
        }
    })
})();

DOM树的广度优先遍历：

const travers=(ndRoot)=>{
    const queue=[ndRoot];
    while(queue.length){
        const node=queue.shift();
        printInfo(node);

        if (!node.children.length) {
            continue;
        }
        Array.from(node.children).forEach(x=>queue.push(x));

    }
};

const printInfo=(node)=>{
    console.log(node.tagName,'.${node.className}');
};

traverse(document.querySelector('.root'));

参考自：王仕军专栏