DOM节点

    function $(names){ //封装获取id元素
       return document.getElementById(names);
    }
    var box = $('box'); //传参
    var sp = $('sp');
    var sps = $('sps');
    console.log(box.firstElementChild);//打印第一个子元素
    console.log(box.lastElementChild);//打印最后一个子元素
    console.log(box.childElementCount);//打印子元素的个数
    console.log(box.previousElementSibling);//打印前一个同辈元素
    console.log(box.children);//获取元素子元素,返回一个数组
    console.log(sp.nextElementSibling);//打印下一个元素
    console.log(sps.previousSibling);//打印上一个节点
    sp.classList.add('nn');//为元素增加类名
    sp.classList.remove('aa');//为元素删除类名
    console.log(sp.classList.contains('aa'));//检测该类名是否存在，返回布尔值

2

var box = document.createElement('div');//创建一个新的div节点并取变量名
    var spa = document.createElement('span');//创建一个新的span节点并var变量名
    var newboxtext = document.createTextNode('hello world');//创建文本节点
    box.appendChild(newboxtext);//把文本节点插入div里
    box.classList.add('aa');//给div取一个class名
    // var boxnode = document.getElementsByClassName('aa')
    var wrap = document.getElementsByClassName('wrapper')[0];//获取id名为wrapper的div并给变量名
    wrap.appendChild(box);//把变量名为box的div放到变量名为wrap的div里
    wrap.appendChild(spa);//同上
    var h1 = document.createElement('h1');//创建一个新的h1标节点
    wrap.insertBefore(h1,box);//wrap为在什么地方插入；h1为想插入的元素；box为插入到这个元素前；
    var h2 = document.createElement('h2');
    wrap.replaceChild(h2,h1);//替换节点。h2为新节点，h1为要替换的节点；（简而言之：h1替换为h2）
    wrap.removeChild(spa);//删除节点。该方法不是在删除的节点上调用，而是在父节点上调用。
    var uls = document.getElementById('uls');//获取ul节点
    var ss = uls.cloneNode(false);//克隆变量名为uls的元素；true为全部克隆；false为只克隆这个元素
    wrap.appendChild(ss);//把克隆的元素插入到div里；