dom 节点的操作

元素 ：1 属性：2 文本：3
DOM 基本操作
遍历节点树：
1. parentNode 父节点(最顶端的parentNode 为 #document)
2. childNodes[n] 子节点
3. firstChild 第一个子节点
4. lastChild 最后一个子节点
5. nextSibling 后一个兄弟节点 previousSibling 前一个兄弟节点
基于元素节点树的遍历
1. parentElement 返回当前元素的父元素节点(IE不兼容)
2. children 只返回当前元素的元素子节点
3. node.childElementCount === node.children.length 当前元素节点的子元素节点个数(IE不兼容)
4. firstElementChild 返回的是第一个元素节点(IE不兼容)
5. lastElementChild 返回的是最后一个元素节点(IE不兼容)
6. nextElementSibling / previousElementSibling 返回后一个/前一个兄弟元素节点(IE不兼容)

    节点的四个属性：
        1. nodeName：元素的标签名，以大写形式表示，只读 
        2. nodeValue：Text节点或Comment节点的文本内容，可读写
        3. nodeType：该节点的类型，只读
        4. attributes：Element节点的属性集合

    节点的方法：
        1. Node.hasChildNodes();
    
    增：
        document.createElement();               新创建的一个元素节点
        document.createTextNode();              新增加一个文本节点[元素节点的内容]
        document.createComment();               
        document.createDocumentFragment();      文档碎片
        
    插:
        appendChild();               在父节点中中加入创建的新的元素节点  插入的是元素节点  append 插入的是字符串
        insertBefore(new,old);       在父节点点中插入到 .... 前面
    删：
        removeChild();               删除该节点
        child.remove();
        deleteRow                    删除表格
    替换：
        replaceChild(new,old);        替换改节点
    属性：
        innerHTML
        innerText(火狐不兼容)/textContent(老版本IE不好使)
    方法：
        ele.setAttribute()          设置节点属性值(当前节点)
        ele.getAttribute()          获取节点属性值(当前节点)

    克隆：
        cloneNode(true)             克隆节点

        创建属性节点：
          1. 建立一个属性节点
              var attrObj = document.createAttribute('id')
          2. 为属性节点赋值
              attrObj.value = 'box';
          3. 讲属性节点加入至元素节点
              setAttributeNode(attrObj)